web-dev-qa-db-ja.com

Bootstrap 3でdivを右に揃える

Bootstrap 3にdivを右揃えする方法はありますか？

オフセットの可能性は承知していますが、フォーマットされたdivをコンテナの右に揃えながら、全角のモバイルビューの中央に配置する必要があります。クラス 'pull-right'はもう機能していません。彼らはそれを交換するのを忘れていましたか、それとも明らかな何かを見逃していますか？

<div class="row">
  <div class="container">
    <div class="col-md-4">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4">
      <!-- The next div has a background color and its own paddings and should be aligned right-->
      <!-- It is now in the right column but aligned left in that column -->
      <div class="yellow_background">right content</div>
    </div>
  </div>
</div>

Shure私はCSSでこれを行う方法を知っていますが、純粋なbootstrap 3で行うことができますか？

htmlcsstwitter-bootstrap-3
45
Klaaz

クラスのプル権はBootstrapにまだあります3 'helper classes' here を参照してください

プルライトは

.pull-right {
  float: right !important;
}

スタイルやコンテンツに関する詳細情報がなければ、言うのは困難です。

ページが990px​​よりも広い場合、つまりcol-mdスタイリングが開始され、Bootstrap 3が最初にすべてモバイルである場合、これは間違いなく適切にプルされます JSBIN .

54
JasonB

次のような意味ですか？

HTML

<div class="row">
  <div class="container">

    <div class="col-md-4">
      left content
    </div>

    <div class="col-md-4 col-md-offset-4">

      <div class="yellow-background">
        text
        <div class="pull-right">right content</div>  
      </div>

    </div>
  </div>
</div>

CSS

.yellow-background {
  background: blue;
}

.pull-right {
  background: yellow;
}

完全な例は Codepen にあります。

44
Eric Geurts

私はあなたがdiv内でコンテンツを右に揃えようとしていると思います、オフセット付きのdivはすでに右にプッシュします、ここでいくつかのコードと LIVEサンプル ：
FYI：.pull-rightdivを右にプッシュしますが、div内のコンテンツはプッシュしません。

HTML：

<div class="row">
  <div class="container">
    <div class="col-md-4 someclass">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4 someclass">
      <div class="yellow_background totheright">right content</div>
    </div>
  </div>
</div>

CSS：

.someclass{ /*this class for testing purpose only*/
    border:1px solid blue;
    line-height:2em;
}

.totheright{ /*this will align the text to the right*/
  text-align:right;
}

.yellow_background{
    background-color:yellow;
}

別の変更：

...
<div class="yellow_background totheright">
  <span>right content</span>
  <br/>image also align-right<br/>
  <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...

問題が解決することを願っています

4
xnome

Bootstrap 4 +は、このためにユーティリティクラスに変更を加えました。 ドキュメント から：

レスポンシブフロート用の.float-{sm,md,lg,xl}-{left,right,none}クラスを追加し、.pull-leftと.pull-rightに冗長であるため、.float-leftと.float-rightを削除しました。

新しいバージョンのBootstrapを使用している場合は、右揃えに.float-rightの代わりに.float-lg-right（または.pull-rightなどのサイズ）を使用してください。

1
Voicu