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

Question

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

<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'跨度300px吗？

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

谢谢！

Answer 1

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