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外部创建了空间，因此引导到您的引导CSS变得凌乱并且无法按照您想要的代码对齐

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

Answer 2

您应该使用padding而不是margins。

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

您可能需要调整标记以使外观与增加边距相同。例如，如果要向列添加背景色，但在它们之间留有空格，则可以在列内添加包装器div，将颜色应用到包装器元素，并在列中添加填充。

Bootstrap三列布局崩溃

2 个答案: