twitter-bootstrap - 引导跨度

Question

我最近开始使用 Twitter Bootstrap，但我似乎无法理解 span 的作用以及为什么会有不同的编号 span，例如 span4、span12？什么是偏移量以及它们何时使用？（有时与跨度一起使用）我试图在网上搜索它，但只找到了有关引导程序的具体问题。

Answer 1

Bootstrap“跨度”类用于引导网格系统。

文档显示标有数字的列，每个数字代表span用于此容器的类。偏移量显示在下一节的右侧，它们定义了跨度左侧应该有多少空列。

您可以阅读span4 offset2为“将此块扩展到 4 列，将左侧两列留空”。
默认情况下有 12 列。如果您有span12，它将与容器一样宽（可能是流体）。

这与不再支持的 v3.2.2 相关。可以在此处找到最新版本的 Bootstrap 。

如果您正在 v4 中的 Bootstrap 中寻找“span”类（指的是徽章和标签，而不是网格系统），可以在此处找到。

Answer 2

首先，它们不是<span>标签。（我提到这一点是因为我已经开始输入<span>几次了！）它们是一行内的列宽。

来自http://twitter.github.com/bootstrap/scaffolding.html#gridSystem：

<div class="row">
 <div class="span4">...</div>
 <div class="span8">...</div>
</div>

文档还讨论了偏移量。

Answer 3

22据我所知，如果你想设置响应式页面布局的样式，你也可以使用 col-lg-2 或类似的一些类，在编写 div 标记时，比如

<div class="col-lg-2 col-sm-3 col-xs-6"> some content </div>

这将定义一些内容在屏幕上占据多少列，对于大屏幕、小屏幕和超小屏幕。关键是，每行最多有 12 列，因此一行中的所有内容都必须尊重这一点。你不能有

<row>
<div class="col-lg-5">content1 </div>
<div class="col-lg-6">content2 </div>
<div class="col-lg-3">content3 </div>
</row>

因为这里有 14 个大柱子。不过只有 xs 类加到 24

那么，span 做同样的把戏吗？