Bootstrap 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>
col-lg より小さい画面では、「要素 2」が右揃えにならないようにしたいと思います。つまり、col-lg-6 に対してのみクラス pull-right を効果的に使用します...
どうすればこれを達成できるでしょうか?
ここにフィドルがあります:http://jsfiddle.net/thibs/Y6WPz/
ありがとう
ベストアンサー1
「要素 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>
.pull-rightもう 1 つのオプションは、@media クエリを使用してfloat をオーバーライドすることです。
@media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}
最後に、別のオプションとして、独自の.pull-right-lgCSS クラスを作成します。
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
アップデート
ブートストラップ4含まれるものレスポンシブフロートなので、この場合は を使用しますfloat-lg-right。
追加のCSSは必要ありません。