Bootstrap教程

淺談Bootstrap網格佈局中怎麼進行列換行

青灯夜游

Nov 17, 2021 pm 07:13 PM

bootstrap網格佈局

這篇文章帶大家一起了解一下bootstrap網格佈局中的換行問題，看看網格列如何換行，希望對大家有幫助！

淺談Bootstrap網格佈局中怎麼進行列換行

1、網格佈局中換行常見問題

在上幾節中已經或多或少的介紹了一些關於網格換行的相關知識，在程式碼中也有相關的演示，本節課將對換行再次單獨拿出來詳細講一下，因為如果對換行的相關知識掌握不熟練，很容易造成網頁排版出現很大偏差，或者出現莫名其妙的問題。另外，以前講的時候大多剛好符合滿行，例如4列分2行，但是出問題的往往是不滿行的，例如3列或5列分兩行，則最後的一行如何顯示方式一不注意就很容易出問題。【相關推薦：《bootstrap教學》】

網格換行常見問題：

該換行的地方不換行
#不該換行的地方換行了
自動換行的最後一行排版混亂

#2、列的換行

2.1 `.row-cols-*`用法

我們前面使用的row都是一個單純的<div class="row">，事實上，對於row也可以進一步的使用<code>row-cols-*類別快速設定最能呈現內容和佈局的列數。普通的.col-*類別應用於各個列（例如.col-md-4），而row-cols-*類別是作為快捷方式在父.row上設置的。

.row-cols-*的星號可以寫數字，數字代表一行要顯示的列數，而不是寬度，這一點不要和普通的.col- *相混淆。另外還可以使用.row-cols-auto自適應寬度，不過這樣一來，佈局很可能會脫離你的控制。

下面還是用程式碼來示範以下：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
     <title>网格行列演示</title>
  </head>
  <body>
  
    <div>
        <div class="row row-cols-3">
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

顯示結果如下

淺談Bootstrap網格佈局中怎麼進行列換行

#試著把row-cols-3中的3改為2、4、5、6等查看效果。有沒有發現還有個小驚喜，透過設定列的寬度col-我們沒辦法平均一行顯示5列，但是透過設定row-cols-5就可以實現了。

2.2 `.row-cols--`用法

跟設定列的寬度一樣，設定行數也支援響應式設計，如下程式碼展示了其具體用法，注意不存在row-cols-xs-1這樣的類，請使用row-cols-1，也就是預設不寫就是最小的螢幕。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
     <title>网格行列演示</title>
  </head>
  <body>
  
    <div>
        <div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3">
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

響應式效果動畫

淺談Bootstrap網格佈局中怎麼進行列換行

2.3 超寬換行

#當一個row中，每個單元格都設定了寬度數值，當一行中，剩下的寬度已經放不下一個單元格的時候，會自動換行。這部分內容我已經在「第四節Bootstrap網頁佈局網格系統」做了詳細的講解和演示，在此就不在細講了，如果有不明白的地方還請4.2.4節內容。

2.4 強制換行

在Bootstrap 不改變每列的寬度強制換行通常會新增多個row來完成的，但是有時候需要在一個row內的某個列後強制換行，這時候可以使用一個小技巧：後需要換行的地方，增加一個寬度為100%，高度為0的div來實現強制換行。

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

<!-- 此处强制换行 -->
<div class="w-100"></div>

<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

本來是顯示在一行的，顯示成兩行。

淺談Bootstrap網格佈局中怎麼進行列換行

更多關於bootstrap的相關知識，可在：bootstrap基礎教學！！

以上是淺談Bootstrap網格佈局中怎麼進行列換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

Bootstrap Deep Dive：響應式設計和高級佈局技術Apr 10, 2025 am 09:35 AM

Bootstrap通過網格系統和媒體查詢實現響應式設計，使網站適應不同設備。 1.使用預定義類（如col-sm-6）定義列寬。 2.網格系統基於12列，需注意總和不超12。3.使用斷點（如sm、md、lg）定義不同屏幕尺寸下的佈局。

Bootstrap面試問題：降落您夢想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套開源的前端框架，用於快速開發響應式網站和應用。 1.它提供了響應式設計、一致的UI組件和快速開發的優勢。 2.網格系統使用flexbox佈局，基於12列結構，通過.container、.row和.col-sm-6等類實現。 3.自定義樣式可以通過修改SASS變量或覆蓋CSS實現。 4.常用JavaScript組件包括模態框、輪播圖和折疊。 5.優化性能可以通過只加載必要組件、使用CDN和壓縮合併文件來實現。

Bootstrap＆JavaScript集成：動態功能和功能Apr 08, 2025 am 12:10 AM

Bootstrap和JavaScript可以無縫整合，賦予網頁動態功能。 1）使用JavaScript操作Bootstrap組件，如模態框和導航欄。 2）確保jQuery正確加載，避免常見集成問題。 3）通過事件監聽和DOM操作實現複雜用戶交互和動態效果。

bootstrap搜索欄怎麼獲取Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

bootstrap怎麼插入圖片Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

See all articles