如何在 Bootstrap 3.3.7 中换行

Question

如何在 bootstrap 中换行？，我可以只使用 <br> 但我想知道我是否可以使用 boostrap 执行此操作并避免在我的代码中插入 <br> 。

我想要按钮和 col-md-12 之间的空白空间

jsfiddle: https://jsfiddle.net/y9mznrna/

CSS:

 .col-md-8 {
  border: 1px solid red;
}

.col-md-4 {
  border: 1px solid blue;
}

HTML:

 <div class="col-md-12">
  <h2>test</h2>
  <div class="headline-date">Tuesday
    <button type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
    </button>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <!-- members table -->
    <div class="col-md-8">
      1
    </div>

    <div class="col-md-4">
      2
    </div>

  </div>
</div>

原文由 raduken 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，按钮应该在它自己的行内。现在您只有一个孤立的 col-xs-12 违反了 Bootstrap 标准。所以这样做会更好地将它们分开。之后你需要他们之间有一些余量

<div class="row">
<div class="col-md-12">
  <h2>test</h2>
  <div class="headline-date">Tuesday
    <button type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
    </button>
  </div>
</div>
</div>
<div class="row">
  <div class="col-md-12 ">
    <!-- members table -->
    <div class="col-md-8">
      1
    </div>

    <div class="col-md-4">
      2
    </div>

  </div>
</div>

和造型：

 .col-md-8 {
  border: 1px solid red;
}

.col-md-4 {
  border: 1px solid blue;
}

.headline-date {
  margin-bottom: 30px;
}

示例： https ://jsfiddle.net/y9mznrna/1/

原文由 DavidG 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用具有定义高度的空列，如下所示：

HTML:

 <div class="row">
  <div class="col-md-12 bs-linebreak">
  </div>
</div>

CSS：

 .bs-linebreak {
  height:10px;
}

示例： https ://jsfiddle.net/cyo5xbef/2/

原文由 PinguinoSod 发布，翻译遵循 CC BY-SA 3.0 许可协议