twitter-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当在 normal 中时，类具有 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>

这解决了前面的问题，但增加了一个问题。由于 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>

你有这个结果：

最终解决方案

如果要在 a 中包含 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 来制作三列布局，您不能仅使用引导span元素来做到这一点。