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：所解釋的應用和優勢May 10, 2025 am 12:18 AM

Bootstrap是一個前端框架，用於快速構建響應式網站。其優勢包括：1.快速開發：利用預定義樣式和組件。 2.一致性：提供統一設計風格。 3.響應式設計：內置網格系統適應各種設備。通過CSS類和JavaScript插件，Bootstrap簡化了網頁開發過程。

Bootstrap：簡化響應式Web開發May 09, 2025 am 12:13 AM

Bootstrap簡化開發流程主要通過其柵格系統、預定義組件和JavaScript插件。 1.柵格系統允許靈活佈局，2.預定義組件如按鈕和導航欄簡化樣式設計，3.JavaScript插件增強交互功能，提升開發效率。

Bootstrap：響應式Web設計的關鍵May 08, 2025 am 12:24 AM

Bootstrap是由Twitter開發的開源前端框架，提供了豐富的CSS和JavaScript組件，簡化了響應式網站的構建。 1)其網格系統基於12列佈局，通過類名控制元素在不同屏幕尺寸下的顯示。 2)組件庫包括按鈕、導航欄等，易於定制和使用。 3)工作原理依賴於CSS和JavaScript文件，需注意處理依賴關係和样式衝突。 4)使用示例展示了基本和高級用法，強調了自定義功能的重要性。 5)常見錯誤包括網格系統計算錯誤和样式覆蓋，需使用開發者工具調試。 6)性能優化建議只引入必要組件，使用預處理器定製樣

Bootstrap：一個強大的Web設計框架May 07, 2025 am 12:05 AM

Bootstrap是一個開源的前端框架，由Twitter團隊開發，旨在簡化和加速網頁開發過程。 1.Bootstrap基於HTML、CSS和JavaScript，提供了豐富的組件和工具，用於創建現代化的用戶界面。 2.它的核心在於響應式設計，通過預定義的類和組件實現各種佈局和样式。 3.Bootstrap提供了預定義的UI組件，如導航欄、按鈕、表單等，易於使用和調整。 4.使用示例包括創建簡單的導航欄和高級的可折疊側邊欄。 5.常見錯誤包括版本衝突、CSS覆蓋和JavaScript錯誤，可通過版本管理工具

Bootstrap在React中的力量：詳細的外觀May 06, 2025 am 12:06 AM

Bootstrap在React中可以通過兩種方式集成：1)使用Bootstrap的CSS和JavaScript文件；2)使用React-Bootstrap庫。 React-Bootstrap提供了封裝好的React組件，使得在React中使用Bootstrap更加自然和高效。

在React中使用Bootstrap組件：逐步教程May 05, 2025 am 12:09 AM

在React項目中使用Bootstrap組件可以通過兩種方式：1)使用原始Bootstrap的CSS和JavaScript；2)使用專門為React設計的庫如react-bootstrap或reactstrap。 1)通過npm安裝Bootstrap並在入口文件中引入其CSS文件，然後在React組件中使用Bootstrap類名。 2)安裝react-bootstrap或reactstrap後，直接使用其提供的React組件。使用這些方法可以快速構建響應式UI，但需注意樣式加載、JavaScript

簡單英語的引導程序：簡化網絡開發May 04, 2025 am 12:02 AM

Bootstrap是開源的前端框架，簡化網頁開發。 1.它基於HTML、CSS、JavaScript，提供預定義樣式和組件。 2.使用預定義類和JavaScript插件，實現響應式佈局和交互功能。 3.基本用法是引入CSS和JavaScript文件，使用類創建導航欄等。 4.高級用法包括自定義復雜佈局。 5.調試時檢查類名和文件引入，使用開發者工具。 6.優化建議是只引入必要文件，使用CDN，自定義時用LESS或Sass。

引導和反應：創建響應式Web應用程序May 03, 2025 am 12:13 AM

如何利用Bootstrap和React打造響應式Web應用？通過結合Bootstrap的CSS框架和React的組件化架構，可以創建現代、靈活且易於維護的Web應用。具體步驟包括：1）導入Bootstrap的CSS文件並使用其類樣式化React組件；2）利用React的組件化管理狀態和邏輯；3）按需加載Bootstrap樣式以優化性能；4）使用React的Hooks和Bootstrap的JavaScript組件創建動態界面。

See all articles