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


142

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>


テキストをフロートしたいですか?CSSを見るtext-align
ロンファンデアハイデン

ブートストラップに(標準の)ビルドイン方法はありませんか?
ジャスティン

回答:


85

行内に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-left
  • .text-center
  • .text-right

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


5
彼らはテキストを整列するためのユーティリティクラスを追加したように見える2.3.text-left.text-center、および.text-right
エリックFreeseの

1
@EricFreese-そうです-その更新に気づかなかった-私は私の答えを更新しました。
Billy Moat

これは受け入れられる答えではありません。pull-right(@Amitへのクレジット)と呼ばれる組み込みのブートストラップクラスがあります。IMO、組み込みのBootstrapクラスを使用する方がきれいです...そしてOPが質問でそれを求めました
Kolob Canyon

107

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>

unfrotunately pull-rightgetbootstrap.com/components/#dropdowns-alignment:バージョン3.1で廃止されました
ılǝ

12
@ılǝ「ドロップダウンメニューで .pull-right 廃止しました。」これは、他のプルライトの使用法には適用されません。
user2864740

78

ブートストラップ3には、div内のテキストを配置するクラスがあります

<div class="text-right">

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

<div class="pull-right">

テキストだけでなくすべてのコンテンツを右に引き出します


text-righttext-leftそしてtext-center完璧に動作します。そして、それに応じてテキストをコンテナに揃えます。
Anish Nair、2015

@BojanKogojのおかげで、v3.1のドロップダウンメニューでは実際にプルライトは廃止されました。getbootstrap.com
components

27

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

<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つのクラスを組み合わせても機能しません。


1
これが正解です。Bootstrapのポイントは、スタイルを直接扱う必要がないようにすることです。
クリステンウェイト2015

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


3

クラス名は、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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.