在.row-fluid容器内的bootstrap .row

Question

我希望能够在 .row-fluid 容器中放置一个固定的span 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（遗憾的是你需要放大输出窗格） - ＆gt; http://jsbin.com/uwecuv/1/edit

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

你们有什么想法我怎么能让'div.span3.gray'跨度300px？

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

谢谢！

Answer 1

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