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>

然后当我收缩页面或移动设备时。就像一张桌子一样，这些怎么样呢？

<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

Answer 2

您还可以通过更改列数来customize your Bootstrap's file。

要更改的属性为@grid-columns，在您的情况下设置为9。

然后你只需要download自定义的Bootstrap文件，并用这个替换默认值。请注意，它会在整个页面中应用@grid-columns = 9。

更改网格系统中的Bootstrap列数

2 个答案: