作成中のページに 5 つの等しい列を配置したいのですが、ここで 5 列のグリッドがどのように使用されているのか理解できません。http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上記で示されている 5 列のグリッドは、Twitter Bootstrap フレームワークの一部ですか?
ベストアンサー1
Bootstrap 4の場合
Bootstrap 4ではデフォルトでフレックスボックスが使用されるようになったため、すぐにその魔法の力にアクセスできます。自動レイアウト列ネストされている列の数に応じて幅が動的に調整されます。
次に例を示します。
<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>
Bootstrap 3の場合
Twitter Bootstrapを使用した素晴らしい全幅5列レイアウトが作成されましたここ。
これは、Bootstrap 3 とシームレスに連携するため、これまでで最も高度なソリューションです。レスポンシブ デザイン用の現在の Bootstrap クラスと組み合わせて、クラスを何度も再利用できます。
CSS:
これをグローバル スタイルシートに追加するか、ドキュメントの下部に追加しますbootstrap.css。
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
ぜひ活用してください。
たとえば、中サイズの画面では 5 列レイアウトのように動作し、小さい画面では 2 列のように動作する div 要素を作成する場合は、次のようなコードを使用します。
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
動作デモ- フレームを展開すると、列がレスポンシブになることがわかります。
別のデモ- 新しいクラスをやcol-*-5thsなどの他のクラスと統合します。フレームのサイズを変更して、レスポンシブ ビューですべてが に変わるのを確認します。col-*-3col-*-2col-xs-6