Bootstrap中mt-3、mb-3类为何未应用到每一行？

你遇到的其实是CSS里很常见的**margin折叠（margin collapse）**现象——相邻两个块级元素的垂直margin会合并成一个，取两者中较大的值。你给第一个row加了mb-3，第二个row加了mt-3，这两个类对应的margin值都是1rem，所以合并后中间的间距只有1rem，看起来就像只有第一行的margin生效了。

下面给你两种可行的解决方案：

方案一：用内边距（padding）替代外边距（margin） #

这种方法可以完全避免margin折叠的问题，给每个row添加py-3类（py代表上下方向，3对应Bootstrap的间距等级），这样每个row的上下都会有内边距，视觉上就是你想要的“上下间距”效果：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
  <div class="row py-3" style="background-color:white">
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
  </div>
  <div class="row py-3" style="background-color:whitesmoke">
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

方案二：调整margin的使用方式，避免折叠 #

如果你坚持想用margin，可以给整个内容容器添加顶部间距，然后给每个row（除了最后一个）添加底部间距，这样就不会出现合并问题：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
  <!-- 给容器添加顶部间距 -->
  <div class="mt-3">
    <div class="row mb-3" style="background-color:white">
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    </div>
    <!-- 最后一个row不需要底部间距，避免和页面底部产生多余空白 -->
    <div class="row" style="background-color:whitesmoke">
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
      <div class="col-3"> completions based on variable types, function definitions, and imported modules. </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者gartenkralle