首頁 > web前端 > css教學 > 如何在 Bootstrap 中建立七個相等的列?

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

Mary-Kate Olsen
發布: 2024-11-01 14:59:28
原創
554 人瀏覽過

How to Create Seven Equal Columns in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板