twitter-bootstrap – 如果处于良好状态,跨越在引导程序中添加到

问题是填充和井元素的边界.当在正常行内时,span8类具有620px的固定宽度.

大型元素的填充为24px(绿色部分),边界为1px,因此嵌套行将位于蓝色部分内.但蓝色部分的宽度不是620px,宽度为570px.

嵌套行内的span元素也具有固定宽度. span2的宽度为140px,span3的宽度为220px.

如果添加span元素及其边距的所有宽度(220px 140px 220px(20px * 2)= 620px),则行的总宽度大于井元素(570px),因此最后一个元素被推送到下一行.

怎么解决？

第一次尝试

我的第一个也是更简单的解决方案是将类span8放在井元素中(JSFiddle)：

<div class="row">
   <div class="span8 well well-large">
      <h3>Place an Order</h3>

      <div class="row">
         <div class="span3">Bid Price</div>
         <div class="span2">Execute</div>
         <div class="span3">Ask Price</div>
      </div>
   </div>
</div>

这解决了以前的问题,但添加了一个问题.由于填充现在位于span8元素中,因此主网格被破坏,因为井元素的宽度为670px(宽度为620px,您必须从填充和边界添加50px).

但现在蓝色部分的宽度为620px,因此嵌套行的所有元素都可以完美地适合蓝色部分.但正如我之前所说,电网坏了.例如,如果在span8之后添加span4元素,则span4将被推送到下一行,就像之前使用嵌套元素一样.

所以有了这个布局(JSFiddle)：

<div class="row">
    <div class="span8 well well-large">
         <!-- Some ramdom text -->
    </div>
    <div class="span4">
         <!-- Some ramdom text -->
    </div>
</div>

你有这个结果：

最终解决方案

如果您想在井内有3个柱,则需要使用不同的网格系统.一种解决方案可以是使用行液而不是行.对于行液,跨度元素的宽度是百分比,而不是固定宽度.

有了这个布局(JSFiddle)：

<div class="row">
    <div class="span8">
        <div class="well well-large">
            <h3>Place an Order</h3>

            <div class="row-fluid">
                <div class="span4">Bid Price</div>
                <div class="span4">Execute</div>
                <div class="span4">Ask Price</div>
            </div>
        </div>
    </div>
</div>

你可以实现类似于你想要的东西.如果你想要3/8,2 / 8和3/8的精确比例(就像你的初始设置有跨度),你必须使用CSS来制作三列布局,你不能只使用bootstrap span元素.