如果处于良好状态,则在bootstrap中添加父节点不起作用

Question

<div class="row">
    <div class="span8">
        <div class="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>

那是我的结构.买入价,执行价和卖出价应该都在同一行.因为他们在井里,他们似乎没有.这种已知的行为是否存在？

Answer 1

为什么嵌套行不适合一行？

问题是填充和well元素的边界.span8当在法线内时,class具有620px的固定宽度row.

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

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

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

怎么解决？

第一次尝试

我的第一个也是更简单的解决方案是将类span8放在well像这样的元素中(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,因此嵌套行的所有元素都可以完美地适合蓝色部分.但正如我之前所说,电网坏了.例如,如果您添加span4后的元素span8,将span4被推到下一行,就像是与嵌套元素之前发生的事情.

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

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

你有这个结果:

最终解决方案

如果你想要一个内部的3列well,你需要不同的网格系统.一种解决方案可以使用row-fluid而不是row.使用时row-fluid,span元素的宽度是百分比,而不是固定宽度.

有了这个布局(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元素.