如果处于良好状态，则在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类在正常row内时的固定宽度为620像素。

well-large元素的填充为24px（绿色部分），边框为1px，因此嵌套行将位于蓝色部分内。但是蓝色部分的宽度不是620px，宽度是570px。

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

如果添加span元素及其边距（220px + 140px + 220px +（20px * 2）= 620px）的所有宽度，则行的总宽度大于{{1} } element（570px），因此最后一个元素被推送到下一行。

如何解决？

首次尝试

我的第一个更简单的解决方案是将课程well放在span8元素中（JSFiddle）：

well

这解决了上一个问题，但添加了一个问题。由于填充现在位于<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> 元素中，因此主网格被破坏，因为井元素的宽度为670px（宽度为620px，您必须从填充和边界添加50px）。

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

使用此布局（JSFiddle）：

span4

你有这个结果：

最终解决方案

如果您想要<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元素的宽度是百分比，而不是固定宽度。

使用此布局（JSFiddle）：

span

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