html - Twitter Bootstrap：使行或行流体的内容不换行和溢出

Question

Bootstrap 有一个 12 列网格，当您的内容超出列时，内容会换行（下面的示例）。

<div class="row-fluid">
    <div class="span6">
        <p>foo</p>
    </div>
    <div class="span6">
        <p>bar</p>
    </div>
    <div class="span6"> <!-- the extra content which will wrap -->
        <p>baz</p>
    </div>
</div>

我希望内容保持在同一行并溢出（本质上我正在设计一个矩阵并且包装不适用于矩阵）。我看过浮动子元素（span6s）并将其设置overflow为autoon row-fluid，但这不起作用。

有没有可能的解决方案？

Answer 1

是的，您需要确保您的“span-count”不超过 12。在您有 3 列的情况下，您应该使用“span4”而不是“span6”。

有关详细信息，请参阅http://twitter.github.io/bootstrap/scaffolding.html#gridSystem。网格是围绕 12 列设计的，虽然你可以拥有更少的列，但如果你拥有更多列，它就会行为不端。如果您想拥有更多内容，则必须覆盖 spanX 的 CSS 类，以确保总宽度不超过 100%。