web-dev-qa-db-ja.com

Twitterのブートストラップfloat div right

Divを右にフロートさせるbootstrapの正しい方法は何ですか？私は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>
htmlcsstwitter-bootstrap
138
Justin

あなたはあなたの列の中に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

80
Billy Moat

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

ブートストラップ3はdiv内のテキストを揃えるためのクラスを持っています

<div class="text-right">

テキストを右側に揃えます

<div class="pull-right">

テキストだけでなくすべてのコンテンツを右に引っ張ります

78
ishimwe

インラインスタイルを追加する必要なしに、これはトリックをします

<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>を "pull-right"クラスにネストすることです。 2つのクラスを組み合わせるとうまくいきません。

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

これは私のために働きます。

編集：あなたのスニペットの例：

@import url('https://unpkg.com/[email protected]/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>
18
Kévin Berthommier

Text-center、leftまたはrightのようにクラス名を割り当てることができます。テキストはこれらのクラス名に従って配置されます。追加のクラス名を別に作成する必要はありません。これらのクラスはBootStrap 3とbootstrap 4に組み込まれています。

ブートストラップ3

v3テキスト配置ドキュメント

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ブートストラップ4

v4テキスト配置ドキュメント

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
3
Faisal