Twitterブートストラップの5つの等しい列

361

作成しているページに5つの同じ列を配置したいのですが、5列グリッドがどのように使用されているのか理解できません。http：//web.archive.org/web/20120416024539/http： // domain7 .com / mobile / tools / bootstrap / sensitive

5列グリッドは、Twitterブートストラップフレームワークの一部の上に示されていますか？

twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— ガンダルフ
ソース
あなたは非常に古いバージョンのブートストラップを見ています。（最新、私は願っています）ブートストラップに5列の「レスポンシブ」グリッドがあることを期待していますか？
— Andres Ilich 2012
3
私はちょうどそれを認識しました.1つはv1.3.0で、現在は2.0.2です。最新バージョンは12列のグリッドです。つまり、2、3、4、および6つの等しい列を持つことができます。多くのことを変更することなく、5つの等しい列を持つことが可能です。
— ガンダルフ2012
できますが、一部のグリッド要素とレスポンシブグリッド要素を大幅に変更する必要があります。あなたのサイトはまったく反応がありますか？この方法で答えを出すのは少し簡単です。そうでなければ、多くのコードになります。
— Andres Ilich
はい、サイトはレスポンシブですが、グリッド要素も変更する必要があります。
— ガンダルフ2012
1
.container.one-fifth.column {width：17％; }息をのむような素晴らしい何かを期待しています。17.87847％も。
— ガンダルフ

回答:

406

span2のクラスで5つのdivを使用し、最初の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>
— jkofron.e
ソース
44
全幅には行きません。それはいいけど
— machineaddict 13
45
私が投稿したソリューションは全幅で5つの等しい列を作成します。ここに回答があります。
— Fizzix 2014
5
@fizzixが以下に提供する回答のように全幅に行きません。このように、両側に不要なマージンを作成します-jsfiddle.net/wdo8L1ww
— Fizzix '27
3
このソリューションでは列がかなり小さく見えるので、@ fizzixソリューションを好む
— dc2009
2
Bootstrap 4 5 cols（全幅）にはCSSまたはSASSは必要ありません：stackoverflow.com/a/42226652/171456
— Zim
526

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

Bootstrap 4の場合

Bootstrap 4はデフォルトでflexboxを使用するようになり、箱から出してすぐにその魔法の力にアクセスできます。ネストされている列の数に応じて幅を動的に調整する自動レイアウト列を確認してください。

次に例を示します。

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

ワーキングデモ

— フィジックス
ソース
1
それらを呼び出すことcol-*-15は混乱するかもしれません。15カラムグリッドシステムの一部であると思われますが、そうではありません。
— Paul D. Waite、2014年
2
@ PaulD.Waite-私は人々に知らせるために私の答えに小さなメモを追加しました。
— Fizzix 2014年
2
col-*-15私には問題ありませんが、col-*-5ths列名がややわかりにくいかもしれません。私が使用しているのは、他の開発者が混乱しないようにするためです。
— Mordred、2014年
3
@scragar様-すべてのBootstrapの現在の列クラスのスタイルを表示すると、それらすべてにが含まれていることがわかりますposition:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;。基本的に、私が投稿したコードは、Bootstrapの組み込みスタイリングと完全に一致するように、これを拡張したものです。次に、の幅を適用して、20%5つの等しい列がページ全体に収まるようにします。非常にシンプル:)
— Fizzix '10
1
2/5列の名前はどうですか？または、1/5の場合はcol-md-1ths、2/5の場合はcol-md-2ths、5/5の場合はcol-md-5ths =全幅？
— Alex
166

以下のためにブートストラップ3、あなたがしたい場合は全幅をし、使用しているLESS、SASSまたは類似した何か、あなたがしなければならないすべてはのメイクを使用することであるブートストラップのミックスイン機能 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)
}

SASS：

.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)
}

あなたが構築できるだけでなく、真の全幅ブートストラップ列クラスこれらのミックスインを使用していますが、すべて構築することができ、関連するヘルパークラスなどを.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)
}

SASS：

.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では、完全に有効な設定について説明していますが、これにより、すべてのブートストラップのコア列幅が変更されます。上記のミックスイン関数を使用すると、デフォルトのブートストラップ列の上に5列のレイアウトが追加されるため、サードパーティのツールや既存のスタイルを壊すことはありません。

— lightswitch05
ソース
5
2.412の5分の1（2.4*5=12）のように最もクリーンなソリューションは、12列グリッドのBootstrap 3で機能します。、にも適用されますがmake-xs、make-sm他の標準のcol定義と組み合わせて機能することはありません（最新の優先度を取得）
— Sherbrow
6
この回答に対する賛成票が比較的少ないことにショックを受けました。他のBootstrapカラムクラスと同じ命名規則を使用するだけでなく、Bootstrapが独自のカラムを作成するために使用する同じミックスインを使用しているため、少なくともBootstrap 4までは将来性があると言えます。
— Chris Fritz、
3
これが最良の答えになるはずです。これに基づいて、自分用にライブラリ（offset、pullおよびを含めるpush）を作成しました。ぜひお気軽にご確認ください
— Kenny Ki
1
誰もが言ったように、はいこれが正しい答えです。@Sherbrowは、彼らが、「他の標準COL定義に組み合わせ動作しません」しかし、この解決策はいくつかの方法で間違っているので、これがないと述べ、その理由は単純に12％5 = 0！
— ニックM
2
@ lightswitch05残念ながら、動的な量の列があったため、これは私には適していませんでした。列が1つしかない場合でも、画面の5分の1にしたいのですが、Fizzixの回答を使用すると、1つの列で画面全体が覆われます。私はなんとか新しいBootstrap 4ミックスイン関数を使用してそれを解決しました。必要に応じて、これを含めるように回答を更新できますか？
— Plog、2018
40

2019年更新

ブートストラップ4.1以降

自動レイアウトグリッドを使用した5つの等しい全幅列（追加のCSSまたはSASSなし）を次に示します。

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

Bootstrap 4がフレックスボックスになったため、このソリューションは機能します。または5列ごとの.row区切りを使用して、5列を同じように折り返すことができます。<div class="col-12"></div><div class="w-100"></div>

参照：ブートストラップ-5列のレイアウト

— ジム
ソース
2
安定するのを待ちきれません:)
— nicolallias
2
良いですが、5要素の行でのみ機能します。あなたがより多くを得るならば、あなたは間違っています。ここで私の強化されたフィドルを参照してください：jsfiddle.net/djibe89/ntq8h910
— djibe
そのため、5列ごとに改行を使用する必要があると説明しました。ソリューションは機能しますが、追加のCSSが必要です。
— ジムジュン
（自動）列が親の幅を超える可能性があるため、に追加flex-nowrapすることも検討してください.row。
— Luuk Skeur
31

以下は、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%;
    }
}
— プレイドコープ
ソース
これはどこに配置し、どのように使用しますか？
— sergserg 2013
1
@Serg 1. Bootstrap cssファイルの下/後に配置します。2. .fivecolumnsクラスを.rowに追加し、クラス.col [、-sm、-lg] -2で5つの列をネストします
— plaidcorp
完全な幅に完全に行かない場合があります。
— Fizzix 2014
col-xs-2が宣言に追加されないのはなぜですか？
— 15
@gandersは見落としです。：このページに別の答えをチェックアウトstackoverflow.com/questions/10387740/...
— plaidcorp
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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
    </div>
</div>

注： span2の5倍は12列とは異なりますが、アイデアはわかります:)

実用的な例はここで見つけることができますhttp://jsfiddle.net/v3Uy5/6/

— Machineaddict
ソース
10

場合にはあなたが必要行いませんまったく同じ列の幅を、あなたは、ネスティング使用して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>

jsfiddle

最初の2つの列の幅は5/12 * 1/2〜20.83％になります

最後の3列：7/12 * 1/3〜19.44％

このようなハックは多くの場合許容できる結果をもたらし、CSSの変更を必要としません（ネイティブブートストラップクラスのみを使用しています）。

— DraggonZ
ソース
9

5列レイアウト用のカスタムBootstrapダウンロードを作成する

移動ブートストラップ2.3.2（またはブートストラップ3）カスタマイズページと、次の変数を設定（入力されていないセミコロンを行います）：

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

ビルドをダウンロードします。このグリッドはデフォルトのコンテナに適合し、デフォルトのガター幅を維持します。

注： LESSを使用している場合は、variables.less代わりに更新してください。

— パブロ
ソース
7

flexbox 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>
スニペットを展開

— カウブ
ソース
flexboxは、必要に応じてブートストラップよりも優れています。
— ml242
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: 17.9%;
}
— スタジオ4
ソース
1
実際の幅は17.94872％で応答しません。すべての@mediaクエリで各列に新しいマージンを設定する必要があります。
— machineaddict 2013
5 
<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%;
}
— マフナ
ソース
1
.equal .span2 {width：20％; }
— Studio4 2013年
...そしてそれは機能していません。最初の列を除いて、各列には左マージンがあります。
— machineaddict 2013
5

クラスcol-sm-2で5つの要素を作成し、最初の要素にクラスcol-sm-offset-1を追加します。

PSこれは全幅ではありません（画面の左右から少しインデントされます）

コードは次のようになります 

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
— agDev
ソース
5

ブートストラップ4、行あたりの列数が可変

行あたり最大 5つの列が必要で、列の数が少なくても各行の1/5しか占めない場合、解決策はBootstrap 4のミックスインを使用することです。

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>
— daGUY
ソース
4

Bootstrap 3で5列を有効にする別の方法は、Bootstrapでデフォルトで使用される12列のフォーマットを変更することです。次に、20列のグリッドを作成します（Bootstrap Webサイトでカスタマイズを使用するか、LESS / SASSバージョンを使用します）。

ブートストラップWebサイトでカスタマイズするには、カスタマイズおよびダウンロードページに移動し、変数を@grid-columnsから12に更新します 20。次に、4列と5列を作成できます。

— ニプソン
ソース
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に関する私の完全な記事です

ブートストラップ3の5つの等しい列

— Bradrice
ソース
3

私の意見では、少ない構文でこのように使用することをお勧めします。この回答は@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 */
— インビトロ
ソース
3

デフォルトでは、Bootstrapは5列のレイアウトを作成できるグリッドシステムを提供していません。Bootstrapがcssファイルにいくつかのカスタムクラスとメディアクエリを作成する方法で、デフォルトの列定義を作成する必要があります

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

そしていくつかのhtmlコード

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
— byteC0de
ソース
3

ブートストラップはデフォルトで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>
— マニッシュヴァーマ
ソース
3

Twitter Bootstrapスタイルの5列のレイアウト

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
— サンジブ・デブナス
ソース
3

多くのCSSを必要とせず、ブートストラップのデフォルトの12colレイアウトを調整する必要のないソリューション：

http://jsfiddle.net/0ufdyeur/1/

HTML：

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS：

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}
— ニコラリア
ソース
3

新しいクラスを作成し、必要に応じて各メディアクエリごとにその動作を定義するだけです

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

これは実際のデモですhttps://codepen.io/giorgosk/pen/BRVorW

— GiorgosK
ソース
2

ブートストラップ3では、左マージンと右マージンを削除するために、そのようなことができると思います。

<div class="row this_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>

およびCSS

.this_row {
    margin: 0 -5%;
}
— グアフ
ソース
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>
スニペットを展開

— ロビンドクマール
ソース
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ブロックを作成してください。これが誰かを助けることを願っています。

— ビカス・バル
ソース
2

5列は明らかに設計上、ブートストラップの一部ではありません。

しかし、Bootstrap v4（alpha）では、複雑なグリッドレイアウトに役立つ2つのことが

  1. Flex（http://v4-alpha.getbootstrap.com/getting-started/flexbox/）、新しい要素タイプ（公式-https://www.w3.org/TR/css-flexbox-1/）
  2. レスポンシブユーティリティ（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/ "

— ゴナティー
ソース
2

私は任意の数の列のブートストラップ定義に基づいてSASSミックスイン定義を作成しました（個人的に12以外に8、10、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);
}

そして、あなたは単純にクラスを作成することができます：

$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);
  }

}

私は誰かがそれが役に立つと思います

— ヌレン
ソース
2

誰かがbootstrap-sass（v3）を使用していますか？これは、ブートストラップミキシングを使用した5列の簡単なコードです：

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

あなたが含まれていることを確認してください：

@import "bootstrap/variables";
@import "bootstrap/mixins";
— ヴェドマント
ソース
1
おかげで、これは私が探していたものでした。柔軟性を高めるために、1-5、2-5、さらに3-10等も作成しました
— morksinaanab '27
2

Bootstrap 4.4以降の場合

新しいrow-cols-nクラスを使用してください。

  1. div にrow-cols-5クラスを追加します.row。カスタムCSSは必要ありません。
  2. row-colsについては、こちらの4.4ドキュメントをご覧ください。https：//getbootstrap.com/docs/4.4/layout/grid/#row-columns

Bootstrap 4.4より前のBootstrap 4バージョンの場合

  1. 以下のCSS（Bootstrap作者による素晴らしいCSS）をコピーしてプロジェクトに追加します

  2. 上記のドキュメントを読んで正しく使用してください。

    .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

— ジベ
ソース
1 

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}
スニペットを展開

— Aroos
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.