資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何縮小 CSS Bootstrap 中一行元素之間的間距？
Bootstrap 網格系統使用一系列容器、行和列來佈局和對齊內容。它具有響應式設計，並使用Flexbox構建。它最多支援每頁 12 列。如果我們不想單獨使用所有 12 列，可以將它們組合在一起以建立更寬的列。
Bootstrap 中的網格系統是響應式的，這意味著列將根據螢幕尺寸重新排列：在大螢幕上，內容可能看起來更有條理，分成三列，但在小螢幕上，內容項應彼此堆疊。
Bootstrap 網格中有四個不同的類
xs: 用於螢幕寬度小於 768px 的手機。
sm: 用於螢幕寬度大於或等於 768px 的平板電腦。
md: 用於相對較小的筆記型電腦，螢幕寬度大於或等於 992px。
lg: 用於較大的筆記型電腦和桌上型電腦，螢幕寬度大於或等於 1200px。
以上類可以組合起來建立更動態和適應性更強的佈局。
Bootstrap 網格系統規則
以下是 Bootstrap 網格系統的一些規則
為了正確對齊和填充，行必須放置在 .container（固定寬度）或 .container-fluid（全寬度）內，因為容器允許我們居中和水平填充網站內容。
我們可以使用行建立水平列組。列也包含在行中。
列應包含內容，並且只有列可以是行的直接子元素。
可以使用預定義的類（例如 .row 和 .col-sm-4）快速建立網格佈局。
列使用填充來建立間距（列內容之間的間隙）。該填充透過在 .rows 上使用負邊距來在行中抵消，用於第一列和最後一列。結果，所有列中的內容將在視覺上沿左側對齊。但是，我們可以透過在 .row 上使用 .no-gutters 來刪除行中的邊距和列中的填充。
網格列是透過指示您想要跨越 12 個可用列中的多少個來建立的。例如，三個大小相等的列需要三個 .col-sm-4。
因為列寬表示為百分比，所以它們始終是流體且相對於其父元素進行大小調整。
有五個網格斷點使網格具有響應性，每個響應斷點一個：所有斷點（超小）、小、中、大、超大。
網格斷點由最小寬度媒體查詢確定，這意味著它們適用於該單個斷點以及所有高於它的斷點（例如，.col-sm-4 應用於除第一個 xs 斷點之外的所有裝置尺寸）。
Bootstrap 網格結構
Bootstrap 網格具有以下結構
<div class= "container">
<div class= "row">
<div class= "col-*-*"></div>
<div class= "col-*-*"></div>
</div>
<div class= "row">
<div class= "col-*-*"></div>
<div class= "col-*-*"></div>
<div class= "col-*-*"></div>
</div>
<div class= "row">
...
</div>
</div>
示例
讓我們看一下使用上述結構作為基礎的簡單示例。
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Bootstrap Grid Example </title>
<meta charset= "utf-8">
<meta name= "viewport" content= "width=device-width, initial-scale= 1">
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "container">
<div class= "row">
<div class= "col-sm-2" style= "background-color: navy; color: white">ROW1 COL1</div>
<div class= "col-sm-4" style= "background-color: royalblue; color: white">ROW1 COL2</div>
</div>
<div class= "row">
<div class= "col-sm-4" style= "background-color: steelblue; color: white">ROW2 COL1</div>
<div class= "col-sm-2" style= "background-color: skyblue; color: white">ROW2 COL2</div>
</div>
</div>
</body>
</html>
刪除間距
我們可以使用 .row-no-gutters 類從行及其列中刪除間距/額外空間。刪除了來自 .row 的負邊距和來自所有直接子列的水平填充。
示例
以下程式碼演示了 row-no-gutters 的用法。
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Bootstrap Grid Example </title>
<meta charset= "utf-8">
<meta name= "viewport" content= "width= device-width, initial-scale =1">
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "container">
<p style= "margin-top: 5px;"> Row without Gutters </p>
<div class= "row row-no-gutters">
<div class= "col-sm-2" style= "background-color: navy; color: white">ROW1 COL1</div>
<div class= "col-sm-4" style= "background-color: royalblue; color: white">ROW1 COL2</div>
</div>
<p style= "margin-top: 5px;">Row with Gutters</p>
<div class= "row">
<div class= "col-sm-2" style= "background-color: steelblue; color: white">ROW2 COL1</div>
<div class= "col-sm-4" style= "background-color: skyblue; color: white">ROW2 COL2</div>
</div>
</div>
</body>
</html>
1K+ 瀏覽量
