Question

我一直在努力回归基础，并且真的想要了解Bootstrap 3列类。

我注意到很多使用col-sm-*或col-md-*类的网站（模板），很少使用它们的混合或包含col-lg-*类。

有人可以解释使用＆＃34;移动优先构建的正确方法＆＃34;记住使用在bootstrap 3中组装的开箱即用类？

Answer 1

他们可能不会同时在同一个div上同时使用col-sm-*或col-md-*类的原因是因为他们可能不需要这些项目以不同的方式重组viewport sizes those levels represent。

之所以这样，是因为任何视口宽度都会出现＆＃34;出血＆＃34;进入下一层（比如从sm到md）将只保留在前一个较小层中定义的内容，而任何视口宽度低于该层的最小值（例如从md到sm）将简单地将列堆叠为页面的整个宽度。

在浏览器中查看此示例，以了解正在进行的操作。

＆＃13;

.green {
  background-color: green;
  border: 1px solid black;
}

.orange {
  background-color: orange;
  border: 1px solid black;
}

.yellow {
  background-color: yellow;
  border: 1px solid black;
}

.blue {
  background-color: blue;
  border: 1px solid black;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
  <div class="col-lg-1 green">.col-lg-1</div>
</div>
<div class="row">
  <div class="col-lg-8 green">.col-lg-8</div>
  <div class="col-lg-4 green">.col-lg-4</div>
</div>
<div class="row">
  <div class="col-lg-4 green">.col-lg-4</div>
  <div class="col-lg-4 green">.col-lg-4</div>
  <div class="col-lg-4 green">.col-lg-4</div>
</div>
<div class="row">
  <div class="col-lg-6 green">.col-lg-6</div>
  <div class="col-lg-6 green">.col-lg-6</div>
</div>
<br><br>
<div class="row">
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
  <div class="col-md-1 orange">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8 orange">.col-md-8</div>
  <div class="col-md-4 orange">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4 orange">.col-md-4</div>
  <div class="col-md-4 orange">.col-md-4</div>
  <div class="col-md-4 orange">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6 orange">.col-md-6</div>
  <div class="col-md-6 orange">.col-md-6</div>
</div>
<br><br>
<div class="row">
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
  <div class="col-sm-1 yellow">.col-sm-1</div>
</div>
<div class="row">
  <div class="col-sm-8 yellow">.col-sm-8</div>
  <div class="col-sm-4 yellow">.col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm-4 yellow">.col-sm-4</div>
  <div class="col-sm-4 yellow">.col-sm-4</div>
  <div class="col-sm-4 yellow">.col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm-6 yellow">.col-sm-6</div>
  <div class="col-sm-6 yellow">.col-sm-6</div>
</div>
<br><br>
<div class="row">
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
  <div class="col-xs-1 blue">.col-xs-1</div>
</div>
<div class="row">
  <div class="col-xs-8 blue">.col-xs-8</div>
  <div class="col-xs-4 blue">.col-xs-4</div>
</div>
<div class="row">
  <div class="col-xs-4 blue">.col-xs-4</div>
  <div class="col-xs-4 blue">.col-xs-4</div>
  <div class="col-xs-4 blue">.col-xs-4</div>
</div>
<div class="row">
  <div class="col-xs-6 blue">.col-xs-6</div>
  <div class="col-xs-6 blue">.col-xs-6</div>
</div>

＆＃13;

逐渐扩大预览窗口，随着它越来越宽，当您输入其最小视口宽度时，您会注意到每个层的结构都会弹出。

如您所见，如果您的布局不会从一个视口宽度急剧变化到下一个，则不必包含所有四个层。任何高于你提供的最大值的东西都会保留，而更小的东西只会让你的div堆叠起来以获得更加适合移动设备的视图。如果您的布局从最小层到最大层都不会发生变化？只需使用xs层而不使用其他层。

这是另一个Bootply，它提供了一个示例，说明当您从移动视图转到更高的视口宽度时，列将如何完全重构。

＆＃13;

div {
  height: 200px;
}

.first {
  background-color: black;
}

.second {
  background-color: blue;
}

.third {
  background-color: red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="first col-sm-6 col-xs-12"></div>
<div class="second col-lg-3 col-sm-6 col-xs-12"></div>
<div class="third col-lg-3 visible-lg-inline"></div>

＆＃13;

运行代码段并展开预览窗口以使其完整，然后使用浏览器窗口的宽度进行播放。您将看到所有内容如何根据视口宽度重新构建自身。

最后，您可能希望在大型和中型显示器上div为3列宽，但在小型或超小型层中只有2列宽。当你定义一个div时，那就是：

<div class="col-md-3 col-xs-2"></div>

这种方式在992像素或更高的视口宽度上，该div将是3列宽，其中从991像素宽和更低，它只有2列宽。

我希望这能让您大致了解网格系统和响应式布局在Bootstrap中的工作原理。绝对阅读the documentation for the grid system，它会告诉你几乎所有你需要知道的事情。 Seroraply，Bootstrap的文档是你能找到的最好的文档。

Answer 2

在Bootstrap之前已经想象并使用了移动优先概念。因此，如果您了解该概念，您将了解如何使用Bootstrap列类。

那么，如何简单地定义移动优先概念？

您的网站必须适合移动设备，无需任何媒体查询
您必须编写从最小宽度到最大

让我们举个例子，你有4种不同的尺寸：

body { background: green; }
@media (min-width: 768px)  { body { background: yellow; } }
@media (min-width: 990px)  { body { background: orange; } }
@media (min-width: 1280px) { body { background: red; } }

您可以看到媒体查询按分辨率大小的顺序编写。 这一点至关重要，因为在媒体查询中编写的代码将覆盖前一个代码。如果你不遵守这个命令，这就是发生的事情：

@media (min-width: 1280px) { body { background: red; } }
@media (min-width: 990px)  { body { background: orange; } }
body { background: green; }
@media (min-width: 768px)  { body { background: yellow; } }

让我们使用1000px宽度的分辨率：

是否大于1280px？否：什么都不做。
是否大于990px？是的：使用橙色。
使用绿色
是否大于768px？是的：使用黄色。

最后，我们的屏幕是黄色的，而它应该是橙色的。

让我们回到Bootstrap！
让我们说你需要一个模板：

手机上的1列（1 x 12）
平板电脑和台式机上的2列（2 x 6）
宽屏幕上的1列（1 x 12）

你是第一次尝试似乎就是这个：

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12">

这完全有效。但您可以缩短此代码。

以下是您要求Bootstrap的内容（请记住类按照分辨率大小的顺序编写，在Bootstrap代码中）：

＃1“Bootstrap，亲爱的...首先，为这个元素使用12列！”
＃2“现在，在768px上使用6列。”
＃3“哦，别忘了在970px上使用6列！”
＃4“最后一件事，在1170px上回到12列，谢谢。”

你可以看到＃2和＃3意味着同样的事情。您可以简单地要求使用768px中的6列，并在1170px处改变您的想法：

<div class="col-xs-12 col-sm-6 col-lg-12">

第二件事，你要求Bootstrap默认使用12列，即宽度为100％。 display: block元素的默认宽度是多少？是的...... 100％。你不需要＃1：

<div class="col-sm-6 col-lg-12">

要恢复：

如果前一个列的列数相同，则不需要.col-xx-xx类
如果元素中的最小值（xs＆lt; sm＆lt; md＆lt; xl），则不需要.col-xx-12类。

很难理解bootstrap 3列类

2 个答案: