如何在 Bootstrap 中建立七個相等的列？

實作7 個相等的Bootstrap 欄位

在Bootstrap 中，建立欄位很簡單，但如何實作不太常見的欄位設定並不總是顯而易見的，例如七個相等的列。

使用 CSS 媒體查詢覆蓋列寬

要實現七個相等的列，我們需要使用 CSS 媒體覆蓋 Bootstrap 列的預設寬度查詢。操作方法如下：

1. 為行容器建立自訂類，例如「七列」。
2. 使用CSS 媒體查詢設定該行中各列的寬度

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%;
  }
}

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

計算列寬：

寬度的計算方式為公式：

width = 100% / 7 column-number

在本例中，有七列：

width = 100% / 7 = 14.285714285714285714285714285714%

這表示每列應設定為父行容器的14.285714285714285714285714285714%。

HTML 標記：

<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>

工作演示：

查看jsbin 上的工作演示，了解七個相等的列的實際效果:
https://jsbin.com/vuvut/3/edit?css,output

以上是如何在 Bootstrap 中建立七個相等的列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！