html - 推特 Bootstrap : make contents of a row or row-fluid not wrap and overflow

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>

我希望内容保持在同一行并溢出(本质上我正在设计一个矩阵，而换行不能很好地处理矩阵)。我查看了 float 子元素 (span6s) 并将 overflow 设置为 auto on row-fluid ，但这不起作用。

有什么可能的解决方案吗？

Answer 1

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

参见 http://twitter.github.io/bootstrap/scaffolding.html#gridSystem了解详情。 Grid 是围绕 12 列设计的，虽然你可以拥有更少的列，但如果你拥有更多的列，它就会出现问题。如果您想要更多，则必须覆盖 spanX 的 CSS 类以确保总宽度不超过 100%。