在Bootstrap 3.3.7中如何实现换行？

Question

如何在Bootstrap中进行换行？我可以使用<br>，但我想知道是否可以使用Bootstrap实现此操作，避免在我的代码中插入<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

---

在按钮后面放置一个空的 div <div style="height: 10px;"></div>。 - Tamil Selvan C

我会清除浮动并给按钮添加边距。 - Huelfe

自定义 CSS 是 Bootstrap 3 的唯一解决方案。 - Sahil Dhir

就我所看到的Bootstrap类定义，甚至它们也使用自定义类来提供底部填充/边距。参考Bootstrap 示例。 - Sagar

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

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

Answer 3

像您在上一段内容中所做的那样，将行中的第一列进行包装，就像这样：

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

- Michael

Answer 4

在你的按钮样式中添加margin-top:10px;。

<button style="margin-top:10px;" type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
</button>

你可以将10px更改为任何你喜欢的间距大小

- Haque