如何在 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)快速创建网格布局。

• 列使用填充 (padding) 来创建间距 (gutter)(列内容之间的间隙)。通过在 .rows 上为第一列和最后一列使用负边距 (margin)，该填充会在行中偏移。因此，列中的所有内容将在视觉上沿左侧对齐。但是，我们可以通过在 .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>

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/