web-dev-qa-db-ja.com

ブーツストラップ3：col-lgの場合のみプルライト

ブートストラップ3の新機能....私のレイアウトには、次のものがあります。

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

私は '要素2'が、小さいカラースクリーンでは正しく整列されないようにしたいと思います。したがって、col-lg-6に対してのみクラスpull-rightを効果的に持つことができます。

どうすればこれを達成できますか？

ここではフィドルです： http://jsfiddle.net/thibs/Y6WPz/ /

ありがとうございました

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
118
Thibs

あなたは "element 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

別のオプションは@mediaクエリを使って.pull-rightのfloatをオーバーライドすることです。

@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;
    }
}

_ update _

ブートストラップ4 includes レスポンシブフロート したがって、この場合はfloat-lg-rightを使用します。
追加のCSSは不要です 。

ブートストラップ4デモ

145
Zim

このLESSスニペットを試してください（上記の例とgrid.lessのメディアクエリミックスインから作成されています）。

@media (min-width: @screen-sm-min) {
.pull-right-sm {
  float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
  float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
  float: right;
}
}
25
user1445230
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}
18
CoKe

メディアクエリを使用して独自のクラスを作成する必要はありません。 Bootstrap 3では、Column Orderingの下にメディアブレークポイントのフロート順序がすでにあります。 http://getbootstrap.com/css/#grid-column-ordering

クラスの構文はcol-<#grid-size>-(Push|pull)-<#cols>です。ここで、<#grid-size>はxs、sm、md、またはlgで、<#cols>は列をそのグリッドサイズに移動する距離です。プッシュまたはプルは、もちろん左右です。

私はいつも使っているので、うまくいくことがわかります。

11
Quinn

うまくいきます：

/* small screen portrait */

@media (max-width: 321px) {

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

}


/* small screen lanscape */

@media (max-width: 480px) {

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

}
3
Greg

以下のCSSを Bootstrap 3 アプリケーションに追加すると、

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

新しいクラスとまったく同じように機能するクラス

float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right

bootstrap 4で導入されたクラス

@media (min-width: 768px) {
    .pull-sm-left {
        float: left !important;
    }
    .pull-sm-right {
        float: right !important;
    }
    .pull-sm-none {
        float: none !important;
    }
}
@media (min-width: 992px) {
    .pull-md-left {
        float: left !important;
    }
    .pull-md-right {
        float: right !important;
    }
    .pull-md-none {
        float: none !important;
    }
}
@media (min-width: 1200px) {
    .pull-lg-left {
        float: left !important;
    }
    .pull-lg-right {
        float: right !important;
    }
    .pull-lg-none {
        float: none !important;
    }
}
.pull-none {
    float: none !important;
}

それとは別に、それは追加します

pull-{ε|sm-|md-|lg-}none

完全性のために、と互換性がある

float-{ε|sm-|md-|lg-|xl-}none

ブートストラップ4から。

3
caw

テキストの配置に興味がある人のための簡単な解決策は新しいクラスを作ることです：

.text-right-large {
    text-align: right;
}
@media (max-width: 991px) {
    .text-right-large {
        text-align: left;
    }
}

それからそのクラスを追加します。

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

ブートストラップのレスポンシブユーティリティクラスを使用するだけです。

そのための最善の解決策は、次のコードを使用することです。

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right">
        <div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
            elements 2
        </div>
    </div>
</div>

要素はlgスクリーン上でのみ右寄せされます - それ以外ではdisplay属性はデフォルトでblockに設定されているのでdivに設定されます。このアプローチでは、text-rightの代わりにpull-rightクラスを親要素に使用しています。

代替ソリューション：

最大の欠点は、内部のHTMLコードを2回繰り返す必要があることです。

<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 visible-lg">
            elements 2
         </div>
         <div class="hidden-lg">
            elements 2
         </div>
    </div>
</div>
1
luke

Sassを使うのはとても簡単です。単に@extendを使うだけです。

.pull-right-xs { 
    @extend .pull-right;
 }
1
Rogerio Orioli

プッシュアンドプルを使用して列の順序を変更できます。あなたは1つのコラムを引っ張り、大きい装置で他を押します：

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

この問題はbootstrap-4-alpha-2で解決されています。

これがリンクです： http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

Githubにクローンしてください： https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

1
AlbertSamuel

これは私が使っているものです。他のサイズの@ screen-md-maxを変更

/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}
1
aWebDeveloper

今ブートストラップ4を含める：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

そしてコードは次のようになります。

<div class="row">
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">
         <div class="pull-lg-right pull-xl-right">
            elements 2
         </div>
    </div>
</div>
1
Vasile