css - 更改网格系统中的 Bootstrap 列数

Question

如果我只有 9 列，但我想将它们分散到 100% 的 div。如何做到这一点？

<div class="row">
    <div class="col-lg-1 grid-head">NSW</div>
    <div class="col-lg-1 grid-head">VIC</div>
    <div class="col-lg-1 grid-head">QLD</div>
    <div class="col-lg-1 grid-head">WA</div>
    <div class="col-lg-1 grid-head">SA</div>
    <div class="col-lg-1 grid-head">TAS</div>
    <div class="col-lg-1 grid-head">ACT</div>
    <div class="col-lg-1 grid-head">NT</div>
    <div class="col-lg-1 grid-head">NZ</div>   
</div>

然后当我缩小页面或移动设备时。像一张 table ，这些怎么放？

<div class="row">
    <div class="col-lg-1 grid-head">under NSW</div>
    <div class="col-lg-1 grid-head">under VIC</div>
    <div class="col-lg-1 grid-head">under QLD</div>
    <div class="col-lg-1 grid-head">under WA</div>
    <div class="col-lg-1 grid-head">under SA</div>
    <div class="col-lg-1 grid-head">under TAS</div>
    <div class="col-lg-1 grid-head">under ACT</div>
    <div class="col-lg-1 grid-head">under NT</div>
    <div class="col-lg-1 grid-head">under NZ</div>   
</div>

Answer 1

你可以做的是将这 9 个元素分成三个一组。

这样，您就可以按照 col-*-4 的方式给每个组一些东西。

所以你的 HTML 看起来像

  <div class="col-lg-4 PA">
    <div class="col-lg-4 grid-head">NSW</div>
    <div class="col-lg-4 grid-head">VIC</div>
    <div class="col-lg-4 grid-head">QLD</div>
  </div>
  <div class="col-lg-4  PA">
    <div class="col-lg-4 grid-head">WA</div>
    <div class="col-lg-4 grid-head">SA</div>
    <div class="col-lg-4 grid-head">TAS</div>
  </div>
  <div class="col-lg-4  PA">
    <div class="col-lg-4 grid-head">ACT</div>
    <div class="col-lg-4 grid-head">NT</div>
    <div class="col-lg-4 grid-head">NZ</div> 
  </div>

我添加了 PA 类来删除网格头的任何填充。稍微清理一下 CSS 并移除所有填充后，您将获得所需的条件。

这是一个working demo