[解決済み] Bootstrap 3.3.7で改行する方法

質問

ブートストラップで改行するにはどうしたらいいですか？ <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>

解決方法は？

まず、ボタンは独立した行の中にあるべきです。今、あなたはただ、孤立した 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/