Html 如何在Bootstrap 3.3.7中执行换行

如何在bootstrap中执行换行？我可以使用

，但我想知道是否可以使用bootstrap执行此操作，并避免在代码中插入

我想在按钮和col-md-12之间留出一个空白

jsfiddle：

css:

html:

测试
星期二
呼叫
1.
2.

将第一列换行，就像在上一个内容中那样，如下所示：

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

内容

首先，按钮应该在它自己的行中。现在您只有一个孤立的

col-xs-12

，它违反了引导标准。因此，这样做可以更好地将它们分开。在那之后，你需要在他们之间留一些余地

<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>

---

示例：

添加边距顶部：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更改为任何您喜欢的间距

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

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

HTML:

---

示例：

在按钮后放置空div

我将清除浮动并为按钮提供边距。自定义css是引导3的唯一解决方案。就我所看到的引导类定义而言，即使它们使用自定义类来提供底部填充/边距。对引导的引用

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

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

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

<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>

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

.bs-linebreak {
  height:10px;
}