twitter-bootstrap - 如果运行良好，跨度在 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 内时具有 620px 的固定宽度。


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



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



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

如何解决？

第一次尝试

我的第一个也是更简单的解决方案是将类 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>

这解决了前面的问题，但增加了一个问题。由于 padding 现在在 span8 元素中，主网格被破坏，因为 well 元素的宽度为 670px(到 620px 的宽度，您必须从井的 padding 和边框添加 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>

你有这个结果:



最终解决方案

如果您想要 well 内的 3 列，则需要不同的网格系统。一种解决方案可以使用 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 元素.