html - Bootstrap 三列布局折叠

Question

我正在尝试使用 col-md-3、col-md-6、col-md-3 创建 Bootstrap 三不等列布局。一切正常，但是当我尝试向列添加边距时，它会折叠它们。我想知道如何防止这种情况发生，我假设它与 Bootstrap 列属性或列宽有关。我很感激我得到的任何帮助，谢谢!

#mid {
  background-color: #fff;
  margin-top: 20px;
}

#favorite {
  background-color: red;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
}

#free {
  background-color: blue;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
}

<div class="container-fluid">
  <div class="row">

    <div class="col-md-3" id="favorite">
      <h2 class="text-center">Favorite</h2>

      <div class="ins">
        <h5>Blah</h5>
        <div>
          <img src="" height="40" width="40"> Blah
        </div>
        <div>
          <img src="" height="40" width="40"> Blah
        </div>
      </div>

      <div class="teach">
        <h5>Blah</h5>
        <div>
          <img src="" height="40" width="40"> Blah
        </div>
        <div>
          <img src="" height="40" width="40"> Blah
        </div>
      </div>

    </div>

    <div class="col-md-6" id="mid">
      <h1 class="text-center">Upcoming</h1>
      <div class="lesson-info" id- "1">
        <img src="" height="40" width="40"> Blah Blah Blah Blah Blah Blah Blah Blah
        <button type="submit" name="submit" class="btn blue_button">Start</button>
        <button type="submit" name="submit" class="btn white_button">Cancel</button>
      </div>

      <div class="col-md-3" id="free">
        <h3 class="text-center">Get free</h3>
      </div>
    </div>
  </div>

Answer 1

添加填充而不是边距。边距在您的 div 外部创建空间，因此您的 bootstrap css 变得困惑并且不会按照您想要的代码对齐

#favorite {
  background-color: red;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
}