html - Twitter ブートストラップ float div 右

Question

bootstrapdivを右にフロートする適切な方法は何ですか? pull-right推奨される方法だと思いましたが、機能していません。

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

Answer 1

div を右にフロートすることをpull-rightお勧めしますtext-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

Answer 2

行内に 2 つの span6 div があるため、行を構成する 12 スパン全体を使用します。

2 番目の span6 div に pull-right を追加しても、すでに右側にあるため、何もしません。

2番目のspan6 divのテキストを右に揃えたい場合は、そのdivに新しいクラスを追加して、 text-align: right 値を与えるだけです。

.myclass {
    text-align: right;
}

---

アップデート：

EricFreese は、Bootstrap の 2.3 リリース (先週) で、使用できる text-align ユーティリティ クラスが追加されたことを指摘しました。

• .text-left
• .text-center
• .text-right

http://twitter.github.com/bootstrap/base-css.html#typography

Answer 3

これは、インライン スタイルを追加する必要なく、うまくいきます。

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

答えは<div>、「プルライト」クラスで別のものをネストすることです。2 つのクラスを組み合わせても機能しません。

Answer 4

<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

これは私にとってはうまくいきます。

編集: スニペットの例:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>