作成中のページに 5 つの等しい列を配置したいのですが、ここで 5 列のグリッドがどのように使用されているか理解できないようです: http://web.archive.org/web/20120416024539/http://domain7 .com/mobile/tools/bootstrap/レスポンシブ
上記の 5 列のグリッドは、Twitter ブートストラップ フレームワークの一部ですか?
質問する
456190 次
45 に答える
578
ブートストラップ 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>
ブートストラップ 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>
WORKING DEMO - フレームを展開して、列が応答することを確認します。
ANOTHER DEMO - 新しいクラスをやcol-*-5thsなどの他組み込みます。フレームのサイズを変更して、レスポンシブ ビューですべての変更を確認します。col-*-3col-*-2col-xs-6
于 2014-04-02T00:21:07.013 に答える
432
span2 のクラスで 5 つの div を使用し、最初に offset1 のクラスを指定します。
<div class="row-fluid">
<div class="span2 offset1"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
出来上がり！等間隔で中央に配置された 5 つの列。
ブートストラップ 3.0 では、このコードは次のようになります。
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
アップデート
ブートストラップ 4.0 はデフォルトで Flexbox を使用するため:
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
于 2012-12-21T23:12:17.617 に答える
170
Bootstrap 3の場合、全角が必要LESSで 、SASS、または同様のものを使用している場合は、Bootstrapの mixin 関数 make-md-column、make-sm-columnなどを使用するだけです。
以下：
.col-lg-2-4{
.make-lg-column(2.4)
}
.col-md-2-4{
.make-md-column(2.4)
}
.col-sm-2-4{
.make-sm-column(2.4)
}
サス:
.col-lg-2-4{
@include make-lg-column(2.4)
}
.col-md-2-4{
@include make-md-column(2.4)
}
.col-sm-2-4{
@include make-sm-column(2.4)
}
これらの mixin を使用して真の全幅ブートストラップ列クラスを構築できるだけでなく、 、、 などの関連するすべてのヘルパー クラスを構築することもできます。.col-md-push-*.col-md-pull-*.col-md-offset-*
以下：
.col-md-push-2-4{
.make-md-column-push(2.4)
}
.col-md-pull-2-4{
.make-md-column-pull(2.4)
}
.col-md-offset-2-4{
.make-md-column-offset(2.4)
}
サス:
.col-md-push-2-4{
@include make-md-column-push(2.4)
}
.col-md-pull-2-4{
@include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
@include make-md-column-offset(2.4)
}
他の回答は、完全に有効な設定について語っています@gridColumnsが、それはすべてのブートストラップのコア列幅を変更します。上記の mixin 関数を使用すると、デフォルトのブートストラップ列の上に 5 列のレイアウトが追加されるため、サードパーティ ツールや既存のスタイルが壊れることはありません。
于 2014-01-15T15:52:42.633 に答える
32
以下は、Bootstrap 3用に書き直された@machineaddictと@Mafnahの回答の組み合わせです（これまでのところうまく機能しています）：
@media (min-width: 768px){
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 1200px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
于 2013-08-01T23:00:49.873 に答える
27
12 列の元のブートストラップを維持し、カスタマイズしないでください。必要な唯一の変更は、次のように、元のブートストラップ レスポンシブ CSS の後の CSS です。
次のコードは、Bootstrap 2.3.2 でテスト済みです。
<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
.fivecolumns .span2 {
width: 18.297872340425532%;
*width: 18.2234042553191494%;
}
}
@media (min-width: 1200px) {
.fivecolumns .span2 {
width: 17.9487179487179488%;
*width: 17.87424986361156592%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .span2 {
width: 17.79005524861878448%;
*width: 17.7155871635124022%;
}
}
/* end of modification for 5 columns */
</style>
そしてhtml：
<div class="row-fluid fivecolumns">
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
注: span2 かける 5 は 12 列に等しくありませんが、アイデアは得られます :)
実際の例はここにありますhttp://jsfiddle.net/v3Uy5/6/
于 2013-07-04T08:41:28.320 に答える
11
まったく同じ幅の列が必要ない場合は、ネストを使用して 5 列を作成してみてください。
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="row">
<div class="col-xs-6 column">Column 1</div>
<div class="col-xs-6 column">Column 2</div>
</div>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-4 column">Column 3</div>
<div class="col-xs-4 column">Column 4</div>
<div class="col-xs-4 column">Column 5</div>
</div>
</div>
</div>
</div>
最初の 2 列の幅は 5/12 * 1/2 ~ 20.83% になります。
最後の 3 つの列: 7/12 * 1/3 ~ 19.44%
このようなハックは、多くの場合、受け入れ可能な結果をもたらし、CSS の変更を必要としません (ネイティブのブートストラップ クラスのみを使用しています)。
于 2015-03-18T12:17:26.057 に答える
9
5 列レイアウト用のカスタム Bootstrap ダウンロードを作成する
Bootstrap 2.3.2 (またはBootstrap 3 ) のカスタマイズ ページに移動し、次の変数を設定します (セミコロンを入力しないでください)。
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
ビルドをダウンロードします。このグリッドはデフォルトのコンテナーに収まり、デフォルトのガター幅を (ほぼ) 維持します。
注: LESS を使用している場合は、variables.less代わりに更新してください。
于 2012-09-08T22:41:32.453 に答える
7
フレックスボックス付きhttp://output.jsbin.com/juziwu
.flexrow {
display: flex;
background: lightgray; /*for debug*/
}
.flexrow > * {
flex: 1;
margin: 1em;
outline: auto green;
}<div class="flexrow">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...<br>..</div>
<div>...</div>
</div>于 2015-11-09T18:12:49.327 に答える
6
私はMafnahの回答に投票しましたが、これをもう一度見て、デフォルトのマージンなどを維持している場合は、次のほうがよいことをお勧めします.
<div class="equal row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
.equal .span2 {
width: 17.9%;
}
于 2013-05-13T16:31:07.413 に答える
6
<div class="equal row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
.equal .span2 {
width: 20%;
}
于 2013-01-24T08:12:09.957 に答える
5
ブートストラップ 4、行ごとの可変数の列
行ごとに最大5 つの列を持ちたい場合、列の数を減らしてもそれぞれの行の 1/5 しか占有しないようにする場合、解決策は Bootstrap 4 のmixinsを使用することです。
SCSS:
.col-2-4 {
@include make-col-ready(); // apply standard column margins, padding, etc.
@include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(2.4);
}
}
.col-md-2-4 {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(2.4);
}
}
.col-lg-2-4 {
@include make-col-ready();
@include media-breakpoint-up(lg) {
@include make-col(2.4);
}
}
.col-xl-2-4 {
@include make-col-ready();
@include media-breakpoint-up(xl) {
@include make-col(2.4);
}
}
HTML:
<div class="container">
<div class="row">
<div class="col-12 col-sm-2-4">1 of 5</div>
<div class="col-12 col-sm-2-4">2 of 5</div>
<div class="col-12 col-sm-2-4">3 of 5</div>
<div class="col-12 col-sm-2-4">4 of 5</div>
<div class="col-12 col-sm-2-4">5 of 5</div>
</div>
<div class="row">
<div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
<div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
</div>
</div>
于 2018-05-29T15:24:53.193 に答える
4
デフォルトのブートストラップは最大 12 列まで拡張できますか? つまり、同じ幅の 12 列のレイアウトを作成したい場合は、内部に div class="col-md-1" を 12 回記述します。
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>
于 2016-02-28T18:32:39.460 に答える
4
Bootstrap 3 で 5 列を有効にする別の方法は、Bootstrap でデフォルトで使用される 12 列の形式を変更することです。次に、20 列のグリッドを作成します (Bootstrap Web サイトでカスタマイズを使用するか、LESS/SASS バージョンを使用します)。
ブートストラップ Web サイトでカスタマイズするには、[カスタマイズとダウンロード]@grid-columnsページに移動し、変数を から12に更新 します20。その後、4 つと 5 つの列を作成できます。
于 2014-07-22T14:31:02.950 に答える
3
私の意見では、Less 構文でこのように使用する方が良いと思います。この回答は、@fizzix からの回答に基づいています
このように、列はユーザーが上書きした可能性のある変数 (@grid-gutter-width、メディア ブレークポイント) を使用し、5 つの列の動作は 12 列のグリッドの動作と一致します。
/*
* Special grid for ten columns,
* using its own scope
* so it does not interfere with the rest of the code
*/
& {
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@grid-columns: 5;
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
@column: 1;
.col-xs-5ths {
.make-xs-column(@column);
}
.col-sm-5ths {
.make-sm-column(@column);
}
.col-md-5ths {
.make-md-column(@column);
}
.col-lg-5ths {
.make-lg-column(@column);
}
}
/***************************************/
/* Using default bootstrap now
/***************************************/
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
/* ... your normal less definitions */
于 2014-08-09T13:53:34.887 に答える
3
これは素晴らしいです: http://www.ianmccullough.net/5-column-bootstrap-layout/
ただ行う：
<div class="col-xs-2 col-xs-15">
そしてCSS：
.col-xs-15{
width:20%;
}
于 2015-06-17T14:33:21.263 に答える
3
これは、ネストと少しの css オーバーライドを使用して行うことができます。
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
Column 1
</div>
<div class="col-sm-4">
Column 2
</div>
<div class="col-sm-4">
Column 3
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6">
Col 4
</div>
<div class="col-sm-6">
Col 5
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
次にいくつかのcss
@media (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}
div.col-sm-5.five-two {
width: 40% !important;
}
}
以下に例を示します: 5 つの等しい列の例
そして、これがcoderwallに関する私の完全な記事です
于 2014-03-12T14:36:42.717 に答える
2
I've created SASS mixin definitions based on bootstrap definitions for any number of columns (personally beside 12 I use 8, 10 and 24):
// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.
@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
@for $i from (1 + 1) through $num-columns {
$list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
}
#{$list} {
position: relative;
min-height: 1px;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
@for $i from (1 + 1) through $num-columns {
$list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
}
#{$list} {
float: left;
}
}
@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index}-#{$num-columns} {
width: percentage(($index / $num-columns));
}
}
@if ($type == push) and ($index > 0) {
.col-#{$class}-push-#{$index}-#{$num-columns} {
left: percentage(($index / $num-columns));
}
}
@if ($type == pull) and ($index > 0) {
.col-#{$class}-pull-#{$index}-#{$num-columns} {
right: percentage(($index / $num-columns));
}
}
@if ($type == offset) and ($index > 0) {
.col-#{$class}-offset-#{$index}-#{$num-columns} {
margin-left: percentage(($index / $num-columns));
}
}
}
@mixin loop-extended-grid-columns($num-columns, $class, $type) {
@for $i from 1 through $num-columns - 1 {
@include calc-extended-grid-column($i, $num-columns, $class, $type);
}
}
@mixin make-extended-grid($class, $num-columns) {
@include float-extended-grid-columns($class, $num-columns);
@include loop-extended-grid-columns($num-columns, $class, width);
@include loop-extended-grid-columns($num-columns, $class, pull);
@include loop-extended-grid-columns($num-columns, $class, push);
@include loop-extended-grid-columns($num-columns, $class, offset);
}
And you can simply create classes by:
$possible-number-extended-grid-columns: 8, 10, 24;
@each $num-columns in $possible-number-extended-grid-columns {
// Columns
@include make-extended-grid-columns($num-columns);
// Extra small grid
@include make-extended-grid(xs, $num-columns);
// Small grid
@media (min-width: $screen-sm-min) {
@include make-extended-grid(sm, $num-columns);
}
// Medium grid
@media (min-width: $screen-md-min) {
@include make-extended-grid(md, $num-columns);
}
// Large grid
@media (min-width: $screen-lg-min) {
@include make-extended-grid(lg, $num-columns);
}
}
I hope someone will find it useful
于 2016-06-06T13:09:56.430 に答える
2
CSS を編集する必要のない最も簡単な解決策は次のとおりです。
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="col-sm-12">Column 1</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 2</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 3</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 4</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 5</div>
</div>
</div>
</div>
また、ブレークポイントを超えてブレークする必要がある場合は、btn-group ブロックを作成してください。これが誰かに役立つことを願っています。
于 2016-03-02T06:53:40.580 に答える
2
設計上、5 つの列は明らかにブートストラップの一部ではありません。
しかし、Bootstrap v4 (alpha) では、複雑なグリッド レイアウトを支援する 2 つの方法があります。
- Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ )、新しい要素タイプ (公式 - https://www.w3.org/TR/css-flexbox-1/ )
- レスポンシブ ユーティリティ ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )
簡単に言えば、私は使用しています
<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
<!-- content to show in MD and larger viewport -->
<a href="#">Link/Col 1</a>
<a href="#">Link/Col 2</a>
<a href="#">Link/Col 3</a>
<a href="#">Link/Col 4</a>
<a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
<!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>
5、7、9、11、13、または何かオッズであっても、大丈夫です。12 グリッド標準がユースケースの 90% 以上に対応できると確信しています。そのように設計しましょう。開発もより簡単になります。
素敵な flex チュートリアルはこちら " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "
于 2016-05-08T17:36:25.013 に答える
2
ブートストラップで 5 列のグリッドを追加する方法
.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }
@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }<div class="row">
<div class="col-sm-1-5">
<div class="item">Item 1</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 2</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 3</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 4</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 5</div>
</div>
</div>于 2015-09-17T09:50:24.653 に答える
1
LESS反復を使用して5列のグリッドが必要な場合は、@lightswitchの回答の即興
.make-fifth-col(@index) when (@index > 0) {
@class-name: ~".col-md-5th-@{index}";
@{class-name} {
.make-md-column(1.2*@index);
}
.make-fifth-col(@index - 1);
}
.make-fifth-col(10);
これにより、 、、... にそれぞれ.col-md-5th-1, col-md-5th-2, col-md-5th-3,対応するcss クラスなどが生成されます。10%20%30%
于 2015-07-13T16:51:50.863 に答える
1
現在、boostrap には、12 列のうち何列にまたがるかを示さない組み込みクラスで行を均等に埋める可能性があります。
col/を使用できますcol-xx :
div div div {
border: solid;
margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<p>Class used , play snippet in full page to test behavior on resizing :</p>
<div class="container">
<div class="row">
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
</div>
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>flex-grow-x も使用できます
div div div {
border: solid;
/* it allows margins too */
margin: 3px;
}
div div div:before {
content: attr(class);
/* show class used */
color: crimson
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="flex-grow-1"></div>
<div class="flex-grow-1"></div>
<div class="flex-grow-1"></div>
<div class="flex-grow-1"></div>
<div class="flex-grow-1"></div>
</div>
</div>于 2020-03-02T21:49:53.780 に答える
1
ブートストラップ グリッド システムを 12 グリッドに分割したので、2 つのグリッド (7+5) に分割しました。この 7 と 5 には、完全な 12 グリッドも含まれています。 +6) したがって、すべてのコンテンツが必要になります。
HTML
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
Column 1
</div>
<div class="col-sm-4">
Column 2
</div>
<div class="col-sm-4">
Column 3
</div>
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6">
Col 4
</div>
<div class="col-sm-6">
Col 5
</div>
</div>
</div>
</div>
</div>
CSS
div.col-sm-7.five-three {
width: 60% !important;
}
div.col-sm-5.five-two {
width: 40% !important;
}
于 2015-09-18T06:24:53.890 に答える
-3
var cols = $(".container .item").length;
if (cols == 5){
$('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
}
Jqueryと完了！フレームワーク！
于 2015-01-27T08:27:34.983 に答える