Question

我正在使用Bootstrap 3.2。我得到了这个信息：

小网格（≥768px）= .col-sm - *

中间网格（≥992px）= .col-md - *

大网格（≥1200px）= .col-lg - *

我的问题是我必须开发一个应该适用于所有平台的网站，然后我应该使用哪个网格系统。

Answer 1

.col-xs-$   Extra Small     Phones Less than 768px
.col-sm-$   Small Devices   Tablets 768px and Up
.col-md-$   Medium Devices  Desktops 992px and Up
.col-lg-$   Large Devices   Large Desktops 1200px and Up

我们可以选择一切，但更喜欢小网格。

Answer 2

我认为你误解了Bootstrap Grid系统的工作方式。您看到的实用程序定义了断点，如果未定义，则断点将占据网格的整个宽度。

Bootstrap基于12列（本机，但您可以使用变量覆盖该值）。有大小（xs，sm，md，lg及其断点由@Pterpatty引用）以及它们消耗了多少列（1到12）。如果考虑到@ Wazan的答案，

<div class="col-xs-12 col-sm-6 col-lg-8">Content Goes Here</div>

您的内容将占据8列大，6列中小（因为中等定义，但小，但它还原到那个大小），12列特别小（手机大小））。

由于Bootstrap的工作方式并且本身就是一个移动优先系统，即使您只是单独定义所有内容，它仍然会工作＆＃34;在手机上，你只需将所有内容恢复到设备的宽度并堆叠在一起（如果你有两个div并排，右边会在左下方移动）。

Answer 3

您可以将其用作

<div class="col-xs-12 col-sm-6 col-lg-8">Content Goes Here</div>

For More Detail

Answer 4

你应该这样使用：

  <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              Content
          </div>
   </div>

在row内，你应该使用col

xs - 超小屏幕 sm - 小屏幕 md - 中等屏幕 lg - 大屏幕

在所有设备中使用哪个网格系统

4 个答案: