如何在 Bootstrap 中创建 7 列网格系统？

在 Bootstrap 中获得 7 个相等的列

挑战

鉴于 Bootstrap 的默认列系统为 12，实现 7 个相等的列可能是一个挑战列。以下代码片段演示了尝试使用 Bootstrap 的内置列类创建 5 个相等的列：

<code class="html"><div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div></code>

但是，这只会产生 5 列，而不是所需的 7 列。

自定义列宽

要克服此限制，需要使用 CSS3 @media 查询覆盖默认列宽。根据所需的列数自定义列的宽度属性将达到预期的效果。

代码实现

以下代码演示了如何在 Bootstrap 中创建 7 列网格系统：

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div></code>

将七列类添加到外部行，以将其与标准 Bootstrap 行区分开来。

然后使用自定义 CSS 来确定每列的宽度：

<code class="css">@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}</code>

14.285714285714285714285714285714% 的宽度值是通过将 100% 除以 7（列数）并乘以列数（在本例中为 1）获得的。此计算可确保所有列具有相等的宽度。

通过结合自定义 CSS 和七列类，您可以创建一个具有 7 个相等列的灵活网格系统，以适应不同的屏幕尺寸。

以上是如何在 Bootstrap 中创建 7 列网格系统？的详细内容。更多信息请关注PHP中文网其他相关文章！