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。
因为列宽是以百分比表示的，所以它们总是流体的，并相对于其父元素调整大小。
网格响应式设计有五个断点，每个响应式断点对应一个网格断点：所有断点（extra small）、small、medium、large和extra large。
网格断点由最小宽度媒体查询确定，这意味着它们适用于该单个断点以及所有在其上的断点（例如，.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>