Bootstrap 三列布局折叠答案

【问题标题】：Bootstrap three column layout collapsingBootstrap 三列布局折叠
【发布时间】：2018-07-09 04:20:09
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： html css twitter-bootstrap margin

【解决方案1】：

添加填充而不是边距。边距在您的 div 外部创建空间，因此您的引导 css 变得混乱，并且不会按照您想要的方式与您的代码对齐

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

【讨论】：

【解决方案2】：

您应该使用padding 而不是margins。

Bootstrap 使用列类生成宽度百分比，因此向列添加边距将呈现超过 100% 的宽度并破坏您的布局。

您可能需要调整标记以获得与添加边距相同的外观。例如，如果您想为列添加背景颜色但它们之间有空格，那么您可以在列内添加包装器 div，将颜色应用于包装器元素并为列添加填充。

【讨论】：