为什么Bootstrap col-xs-＆＃34;始终水平＆＃34;？

Question

在Bootstrap文档中，在＆＃34;超小型设备电话（＆lt; 768px）＆＃34;的大小中，网格系统始终表现为水平＆＃34;。

我不明白这一点，为什么它是横向的？如果屏幕超小，不应该全部垂直堆叠？因此用户将更容易垂直滚动而不是水平滚动。

Answer 1

实际情况恰恰相反。来自Bootstrap docs ..

  

不希望您的列只是在较小的设备中堆叠？使用   通过添加.col-xs- * ..来增加小网格类   你的专栏。

因此col-xs-* 会阻止堆叠并使列保持水平。所有其他网格层（sm，md，lg）将垂直堆叠在特定的＆＃34;断点处＃34;。

• sm层堆叠为768px
• md层堆叠为992px
• lg 层堆栈在1200px

<强> Grid tiers demo

Answer 2

以下是一个例子：

<div class = "row">
  <!--Remember, in bootstrap rows the cols have to add up to 12-->
  <div class = "col-md-6">

  </div>
  <div class = "col-md-6">

  </div>
</div>

col-md-6内部的任何内容都将占用中型+设备的一半，在较小的屏幕上，它将垂直移动。