引导网格系统无法正常工作

Question

我正在研究引导网格系统。

据我了解：

<div class="container">
  <div class="row">
     <div class="col">
     1 of 3
     </div>
     <div class="col-6">
      2 of 3 (wider)
     </div>
      <div class="col">
  3 of 3
</div>

应该显示：

1之3 2之3（较宽）3之3

但是当我使用Chrome打开它时，我看到了：

1之3
2之3（较宽）
3之3

Answer 1

那是因为您没有使用正确的类名，该类名应类似于col-lg-6或col-md-6等。

col-*-*用于响应式网格（ span 1-12 column ）。 超小型设备电话（ < 768px ），小型设备平板电脑（ ≥768px ），中型设备台式机（ ≥992px ），大型设备台式机（ ≥1200px ）。 列值可以是1-12 。

---

您将获得引导程序类的完整列表，并在此处进行描述

尝试这个：

<div class="container">
 <div class="row">
  <div class="col-lg-3">
  1 of 3
  </div>
  <div class="col-lg-6">
  2 of 3 (wider)
  </div>
  <div class="col-lg-3">
  3 of 3
  </div>
 </div>
 </div>

这是演示