gpt4 book ai didi

twitter-bootstrap - 为什么 Twitter Bootstrap 让我有超过 12 列?

转载 作者:行者123 更新时间:2023-12-04 07:46:10 26 4
gpt4 key购买 nike

我有一个容器,里面有 2 个 div:span9span3 .在我的span9 div,我希望仅限于 9 列。但是,除非我在 span9 中设置 div成为 span12 ,它会留下 3 个额外的空白列!

为什么会发生这种情况?对我来说,“span9”应该意味着我有 9 列可用。我根本看不到我正在使用的任何东西会导致该内容被允许重置为网格中的 12 列。零意义。

最佳答案

请注意,这不适用于 Bootstrap 3,因为您可以混合和匹配列类,因此类名中的数字不必加起来为 12。例如,这里是“混合:移动和桌面”的代码” 在他们的 sample grid page 上的示例:

<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8">...</div>
<div class="col-xs-6 col-lg-4">...</div>
</div>

如您所见,尝试将列加起来等于 12 的概念甚至在 Bootstrap 3 中都没有意义。如果您查看 bootstrap.css 内部,您会发现列类只是相对于容器 div 的百分比,例如:
.col-sm-6 {
width: 50%;
}

在这种情况下,如果容器的宽度是 1170px,那么每个 col-sm-6 div 的宽度将等于 1170px 的 50%(为简单起见,让我们忽略该行的 -15px 侧边距),无论该行中有多少列。如果有更多的列不能容纳在容器中,那么这些列将自动换行。如果您的某些列非常高,那么您会想要使用 <div class="clearfix"></div>visible-* 的组合或 hidden-*类以确保一致的行高。

引用: Boostrap 3 Grid system

关于twitter-bootstrap - 为什么 Twitter Bootstrap 让我有超过 12 列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14129715/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com