Bootstrap跨度

我最近开始使用Twitter Bootstrap，我似乎无法理解跨度是什么，为什么会出现不同的编号跨度，如span4，span12？什么是抵消和什么时候使用？（有时与跨度一起使用）我试图在网上搜索它，但只发现有关bootstraps的具体问题。Bootstrap跨度

来源

2012-07-30 Grigor

引导程序“span”类用于bootstrap grid system。

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

您可以将span4 offset2读为“将此块扩展到4列，左边留出两列”。
默认情况下有12列。如果你有一个span12，它将和container一样宽（可能是流体）。

来源

2012-07-30 09:19:08 Kapep

另外，创建主体时，我只是把它放在类容器中吗？因为有很多不同的方式，所以在创建导航栏后，我想知道创建主体并在其中添加内容的正确方法。有没有办法让文字居中让我们说

标签？ – Grigor 2012-07-30 09:24:36

要使用网格系统，您应该选择[布局]（http://twitter.github.com/bootstrap/scaffolding.html#layouts），添加至少一行（请参阅DavePs示例），并为任何元素创建一个跨度你想要在网格中定位。尽管你不需要使用网格系统，但也可以手动设置一些宽度，特别是如果你不需要很多列。我认为像中心文本这样的其他样式应该在加载bootstrap后在另一个css文件中完成。就像把'h1'放入带有'span12'的'div'中，给它一个id或者额外的class和样式，通常的CSS使用'text-align：center;' – Kapep 2012-07-30 09:32:58

kapep对于其他样式是正确的 - 我认为下载包含了一个application.css文件，但如果没有，请将样式放入其中，以便升级到Bootstrap以保持您的更改不变。 – DaveP 2012-07-30 09:36:16

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

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

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

该文档还讨论了偏移。

来源

2012-07-30 09:18:33 DaveP

22As据我所知，如果你想要的风格响应的页面布局，你也可以使用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做同样的把戏吗？

来源

2015-02-04 15:47:31 marko

这是bootstrap 3. span1到span12 ----这是bootstrap 2。 – 2015-06-04 17:11:07

Bootstrap跨度

回答

相关问题