web-dev-qa-db-ja.com

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

私は構築しているページに5つの等しい列を持ちたいのですが、ここで5列のグリッドがどのように使用されているのか理解できないようです： http://web.archive.org/web/20120416024539/http： //domain7.com/mobile/tools/bootstrap/responsive

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

twitter-bootstraptwitter-bootstrap-3bootstrap-4
325
Gandalf

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>
378
jkofron.e

ブートストラップ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 - 列を反応させるために枠を広げる。

他のデモ - 新しいcol-*-5thsクラスをcol-*-3やcol-*-2などの他のクラスと統合する。レスポンシブビューでフレームがすべてcol-xs-6に変わるようにフレームのサイズを変更します。

ブートストラップ4用

Bootstrap 4はデフォルトでflexboxを使用するようになりました。そのため、箱から出してすぐにその魔法の力にアクセスできます。 auto layout columns をチェックしてください。これは入れ子になっている列の数に応じて幅を動的に調整します。

これが例です：

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

WORKING DEMO

469
Fizzix

Bootstrap 3の場合、full-widthを使用し、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)
}

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

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

164
lightswitch05

以下は、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%;
    }
}
30
plaidcorp

オリジナルのブートストラップは12列にしておきます。カスタマイズしないでください。あなたがする必要がある唯一の変更はこのようにいくつかのcss after の元のブートストラップ対応の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/

26
machineaddict

アップデート2018

ブートストラップ4.0

これは、 自動レイアウトグリッドを使用した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がflexboxになったため機能します。 5列ごとに.rowや<div class="col-12"></div>などのclearfix breakを使用して、5つの列を同じ<div class="w-100"></div>内にラップすることができます。

ブートストラップ - 5列のレイアウト も参照してください。

24
Zim

exact 同じ幅の列が必要ない場合は、ネストを使用して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の変更を必要としません（私達はネイティブのブートストラップクラスのみを使用しています）。

10
DraggonZ

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

Bootstrap 2.3.2 （または Bootstrap 3 ）カスタマイズページに移動し、次の変数を設定します（セミコロンを入力しないでください）。

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

ビルドをダウンロードしてください。このグリッドはデフォルトのコンテナに収まり、デフォルトのガター幅を（ほぼ）維持します。

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

8
Pavlo

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

私は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%;
}
5
Studio4

クラス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>
4
agDev
<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%;
}
4
Mafnah

Bootstrap 3で5列を有効にするもう1つの方法は、Bootstrapがデフォルトで使用する12列のフォーマットを変更することです。次に、20列のグリッドを作成します（ブートストラップWebサイトORでcustomizeを使用し、LESS/SASSバージョンを使用します）。

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

3
Nipson

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

@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

2
GiorgosK

これはすごいです： http://www.ianmccullough.net/5-column-bootstrap-layout/ /

ただしてください：

<div class="col-xs-2 col-xs-15">

そしてCSS：

.col-xs-15{
    width:20%;
}
2
Henning Fischer

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;
    }
}
2
Sanjib Debnath

ブートストラップはデフォルトで最大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>
2
Manish Verma

それは入れ子にして少し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つの等しい列

2
bradrice

私の意見では、Less構文でこのように使う方が良いです。この答えは@fizzixの answer に基づいています。

このように、列はユーザ​​ーが上書きした可能性がある変数（@ 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 */
2
vitro

あまり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*/
  }
}
2
nicolallias

デフォルトでは、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>
2
byteC0de

私は、任意の数の列に対するブートストラップ定義に基づいて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);
  }

}

私は誰かがそれが役に立つと思うことを願っています

1
Nulen

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

を1行あたり最大= 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>
1
daGUY

誰かがbootstrap-sass（v3）を使っていますか、これはbootstrap混合を使った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
Vedmant

ブートストラップに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>
1
Robind Kumar

ブートストラップ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%;
}
1
guaph

設計上、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％以上のユースケースに対応できると確信しています - そのように設計しましょう - もっと簡単に開発できます！

Nice flexのチュートリアルはこちらです " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

1
gonatee

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ブロックを作りなさい。これが誰かに役立つことを願っています。

1
Vikas Baru

私はそれを2つのグリッド（7 + 5）に分けました。この7と5も12個の完全なグリッドを含んでいます。なぜ私は7（4 + 4 + 4）と5（6）を分けましたか+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;
}
0
Anand Pandey
.col-half-offset{
    margin-left:4.166666667% !important;
    float: left;
}

<div className="row1 marginTop20">
    <div className="col-xs-12 col-sm-2 col-md-2">
        1
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        2
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        3
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        4
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        5
    </div>
    <div className="clearfix"></div>
</div>
0
Pankaj Upadhyay
.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%;
  }
}
0
Aroos

ブートストラップや他のグリッドシステムは、必ずしも単純で優れているとは限りません。あなたの.containerまたは.rowの中に（あなたのレスポンシブなレイアウトを保つために）u（div .col f.e.クラスで）5 divを作成して、このようにcssを追加することができます。
.col { width: 20%; float: left };

0
Vasyl Gutnyk

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,、10%、20%...に対応するCSSクラス30%などを生成します。

0
Mudassir Ali

Twitterブートストラップ3の場合、これはこれを達成するための最も簡単な方法です。

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
0
paulalexandru

あなたはcol-md-2 with offsetソリューションを全幅にするためのちょっとしたトリックを使うことができます。これは、ブートストラップが15pxのパディングを削除する（隠す）方法を使用します。

マージン " - "を追加するという意味です。実際に計算すると（-10％ - 15px）。両側のマージン。 （10％はオフセット幅、15pxはパディング用です）。

唯一のマイナス点は、ページを水平にスクロールするため、行の親にはoverflow-x：hiddenが必要になることです。

css:
.row-xs-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
  .row-sm-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 992px) {
  .row-md-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 1200px) {
  .row-lg-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}

html:
<div style="overflow-x:hidden;">
  <div class="row row-md-5">
    <div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
    <div class="col-xs-6 col-md-2">col2</div>
    <div class="col-xs-6 col-md-2">col3</div>
    <div class="col-xs-6 col-md-2">col4</div>
    <div class="col-xs-6 col-md-2 text-right">col5</div>
  </div>
</div>

これがデモです： http://jsfiddle.net/sct3j/171/

0
Krzysztof Duszczyk

この問題に対する私の望ましいアプローチは、 make-grid-columns mixinに基づいて既存のBootstrap変数を利用してSASS mixinを作成することです。

// Custom Grid Columns
// 
// $name - determines the class names: eg. ".col-5ths, .col-sm-5ths ..."
// $size - determines the width (2.4 is one fifth of 12, the default number of columns)
@mixin custom-grid-columns($name, $size, $grid-columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    $columns: round($grid-columns / $size);

    %custom-grid-column {
        @include make-col-ready();
    }

    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        .col#{$infix}-#{$name} {
            @extend %custom-grid-column;
        }

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Create column
            .col#{$infix}-#{$name} {
                @include make-col($size);
            }

            // Create offset
            @if not ($infix=="") {
                .offset#{$infix}-#{$name} {
                    @include make-col-offset($size);
                }
            }
        }
    }
}

その後、ミックスインを呼び出してカスタム列とオフセットクラスを生成できます。

@include custom-grid-columns('5ths', 2.4);
0
Logan

ブートストラップv4.3.1では、それは12/5 = 2.4カラム幅のカラムです。それをcol-2dot4（とcol-sm-2dot4、col-md-2dot4、…）と呼びましょう。

そして各コラムは利用可能なスペースの20％を持つべきです。

以下のように出てくるSCSSコード：

@mixin make-5-grid-column($columns: $grid-columns, $Gutter: $grid-Gutter-width, $breakpoints: $grid-breakpoints) {

  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $Gutter / 2;
    padding-left: $Gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    .col#{$infix}-2dot4 {
      @extend %grid-column;
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {

      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%; // Reset earlier grid tiers
      }


      .col#{$infix}-2dot4 {
        @include make-col(1, 5);
      }
    }
  }
}

@if $enable-grid-classes {
  @include make-5-grid-column();
}
0
Sky Yip