[解決済み] Bootstrap 3: col-lgのみ右寄せにする。

質問

bootstrap3は初めてなのですが...。私のレイアウトで私は持っています。

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

col-lgより小さい画面では、'elements 2'を右寄せにしないようにしたいです。つまり、事実上、クラスは col-lg-6 に対してのみプルライトされることになります。

どのように私はこれを達成することができますか？

以下はフィドルです。 http://jsfiddle.net/thibs/Y6WPz/

ありがとうございました。

どのように解決するのですか？

要素2"を小さいカラムに入れることができます（例: col-2 のように）、そして push を使用してください。

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

デモ http://bootply.com/88095

もう一つの方法は .pull-right の float を @media クエリで上書きすることです。

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

最後に、もう一つの方法として、自分で .pull-right-lg CSS クラスを作成することです。

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

アップデイト

ブートストラップ4 には レスポンシブフロート を含むので、この場合、単に float-lg-right .

余分なCSSは必要ありません .

Bootstrap 4 デモ