ブートストラップ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 に対してのみクラスを効果的にプルライトすることができます...
どうすればこれを達成できますか？
ここにフィドルがあります：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>
もう 1 つのオプションは.pull-right、@media クエリを使用してフロートをオーバーライドすることです。
@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;
}
}
アップデート
Bootstrap 4にはレスポンシブ floatが含まれているため、この場合はfloat-lg-right.
追加の CSS は必要ありません。
.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;
}
}
メディア クエリを使用して独自のクラスを作成する必要はありません。Bootstrap 3 には、列の順序の下にメディア ブレークポイントのフロート順序が既にあります: http://getbootstrap.com/css/#grid-column-ordering
クラスの構文は、col-<#grid-size>-(push|pull)-<#cols>where <#grid-size>is xs、sm、md、または lg であり<#cols>、そのグリッド サイズで列を移動する距離です。押すか引くかはもちろん左右です。
私はいつもそれを使用しているので、それがうまく機能することを知っています.
ブートストラップのレスポンシブ ユーティリティ クラスを使用するだけです。
そのタスクの最善の解決策は、次のコードを使用することです。
<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>
ブートストラップ 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>