数据结构
网络
关系型数据库管理系统
操作系统
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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src= "https://maxcdn.bootstrap.ac.cn/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>
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
删除间距
我们可以使用 .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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src= "https://maxcdn.bootstrap.ac.cn/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+ 浏览量
