在 .row-fluid 容器中引导 .row

Question

我希望能够在 .row-fluid 容器中放置一个固定跨度 div (span1..span12)。

<div class="row-fluid">
<div class="span5 red">

    <div class="row">
         <div class="span3 gray">
             I need this to span exactly 300px, not 31% of its parent
        </div>
    </div>
</div>

<div class="span5 blue">
</div>

这里是工作的 jsbin（遗憾的是你需要放大输出窗格）--> http://jsbin.com/uwecuv/1/edit

这个想法是css选择器（.row-fluid span3）在这种情况下优先。

你们有什么想法可以让 'div.span3.gray' 跨度为 300 像素吗？

原因是在实际场景中它将是一个绝对定位的 div，我不希望它继承父级的大小（顺便说一句，这将只是一个带有输入框的 div）。

谢谢！

Answer 1

引导网格系统的设计使得span3 表示元素的宽度=容器宽度的3/12（row 或row-fluid）。因此，如果您需要固定宽度=300px（不是容器宽度的 3/12）的 div，您需要使用您自己的宽度=300px 的 css 类。或者您可以使用没有响应式 CSS 的固定布局。