如何在引导程序中设置两行之间的边距？答案

【问题标题】：How to set margin between two rows in bootstrap?如何在引导程序中设置两行之间的边距？
【发布时间】：2021-11-18 12:28:03
【问题描述】：

如何在引导程序中设置两行之间的间距，如果我们为每一行使用 row 类，设置边距或填充非常容易。但是，虽然将所有列设置在一个 row 类下，但无法设置边距。请检查以下代码。

<div class="row">
 <div class="col-sm-4 col-md-3"> Div 1</div>
 <div class="col-sm-4 col-md-3"> Div 2</div>
 <div class="col-sm-4 col-md-3"> Div 3</div>
 <div class="col-sm-4 col-md-3"> Div 4</div>
 <div class="col-sm-4 col-md-3"> Div 5</div>
 <div class="col-sm-4 col-md-3"> Div 6</div>
 <div class="col-sm-4 col-md-3"> Div 7</div>
 <div class="col-sm-4 col-md-3"> Div 8</div>
 <div class="col-sm-4 col-md-3"> Div 9</div>
 <div class="col-sm-4 col-md-3"> Div 10</div>
</div>

在上面的代码中，如何设置每一行的边距？

我可以设置边距，如果代码采用以下格式但它不会给出响应网格。还有 col-md-* 和 col-sm-* 类是浪费，我们只能使用 col-* 类。

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 1</div>
     <div class="col-sm-4 col-md-3"> Div 2</div>
     <div class="col-sm-4 col-md-3"> Div 3</div>
     <div class="col-sm-4 col-md-3"> Div 4</div>
</div>

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 5</div>
     <div class="col-sm-4 col-md-3"> Div 6</div>
     <div class="col-sm-4 col-md-3"> Div 7</div>
     <div class="col-sm-4 col-md-3"> Div 8</div>
</div>

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 9</div>
     <div class="col-sm-4 col-md-3"> Div 10</div>
</div>

【问题讨论】：

行应该有 12 列...向行添加类并且您可以随时添加maring: 0px 0px 5px 0px !important 对每一行

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

在每个 div 类中，根据您的要求添加 m-1 或 m-2 以从各个方面添加边距。使用 mt-1 或 mt-2 仅添加上边距，使用 mb-1 或 mb-2 添加下边距。有关更多示例，请参阅此documentation。

【讨论】：

【解决方案2】：

您是否尝试过在 CSS 文件中使用 row-gap: 10px; 语法？它将进入.row 类。这应该在 div 中的每一行之间设置一个“边距”。

【讨论】：

如果行拆分会自动加空格吗？
@MerbinJoe 是的，如果有多行，那么每一行之间都会有一个空格。

【解决方案3】：

这正是垂直Gutters 的用途......

  <div class="row gy-5">
        <div class="col-sm-4 col-md-3"> Div 1</div>
        <div class="col-sm-4 col-md-3"> Div 2</div>
        <div class="col-sm-4 col-md-3"> Div 3</div>
        <div class="col-sm-4 col-md-3"> Div 4</div>
        <div class="col-sm-4 col-md-3"> Div 5</div>
        <div class="col-sm-4 col-md-3"> Div 6</div>
        <div class="col-sm-4 col-md-3"> Div 7</div>
        <div class="col-sm-4 col-md-3"> Div 8</div>
        <div class="col-sm-4 col-md-3"> Div 9</div>
        <div class="col-sm-4 col-md-3"> Div 10</div>
  </div>

https://codeply.com/p/g7ewLO9nbJ

Gutters gy-* 用于在列之间增加或decrease vertical spacing。

【讨论】：