5

流体グリッドレイアウトを使用すると、4つの等しいスパンを取得できます。

<div class="row-fluid">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

または、6つの等しいスパンを取得できます。

<div class="row-fluid">
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
</div>

しかし、どうすれば5つの等しいスパンを取得できますか？

4

7 に答える 7

14

幅を計算するためのブートストラップメソッドに従い、次のことを考え出しました。次のような HTML 構造に従う必要があります。

<div class="row-fluid-5">
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>

次に、bootstrap.css と bootstrap-responsive.css をロードした後、次のように custom.css ファイルをロードします。

/* CUSTOM 5 COLUMN SPAN LAYOUT
  *
  * based on http://gridcalculator.dk/
  * width => 1200, gutter => 15px, margin => 15px, columns => 5
  */
 .row-fluid-5 {
   width: 100%;
   *zoom: 1;
 }
 .row-fluid-5:before,
 .row-fluid-5:after {
   display: table;
   line-height: 0;
   content: "";
 }
 .row-fluid-5:after {
   clear: both;
 }
 .row-fluid-5 [class*="span"] {
   display: block;
   float: left;
   width: 100%;
   min-height: 30px;
   margin-left: 1.875%;
   *margin-left: 1.875%;

   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

 .row-fluid-5 .controls-row [class*="span"] + [class*="span"] {

   margin-left: 1.875%;
 }
 .row-fluid-5 [class*="span"]:first-child{
    margin-left: 0;
 }
 .row-fluid-5 .span2 {
   width: 18.5%;
   *width: 18.5%;
 }

 /* responsive ONLY */

 @media (max-width: 600px){ /* spans reduce to 100px then go full width */

    .row-fluid-5 [class*="span"]{
    margin-left: 0;
    float: left;
    width: 100%;
    padding: 10px; 
    }
 }

以下のデモをチェックして、それがどのように機能するかを確認してください。

デモ

于 2013-04-16T22:03:16.717 に答える
3

デフォルトでブートストラップが12列であることを考慮すると、数学的に5つの等しいスパンを取得することはできません。

ただし、本当に必要な場合（悪い考え、これについては1秒で詳しく説明します）、ブートストラップのダウンロードをカスタマイズして15列にすることができます。

http://twitter.github.com/bootstrap/customize.html

@gridColumns変数を15に変更してから、5つの列をすべて。で使用しますspan3。

しかし、それは悪い考えです。12が適切に機能するため、ブートストラップは12列です。12を使用すると、1 / 4、1 / 3、および1/2幅の列がサポートされます。15列のレイアウトでは、1/3の幅（および他の多くの奇妙なサイズ）のみがサポートされます。あなたの呼び出しは、しかし、設定はそこにあります。

于 2013-02-27T04:15:23.417 に答える
1

カスタムグリッド（例：10）を生成する必要があります。12列のグリッドに5つの等しいrawを作成する方法はありません

于 2013-02-27T04:16:31.943 に答える
1

または、これを css (または bootstrap.css) に追加することもできます。これは、これを解決するための私の推奨方法です。「15」は私を少し投げ飛ばしていましたが、1/5 であることを思い出してください。

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

次に、他のブートストラップ クラスと同じように使用します。

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
于 2015-08-12T17:17:49.570 に答える
0

これを 10/2 = 5 の問題に変換するには、span10 の流動的な行を作成してから、span2 の子を持つ流動的な子行を作成します。以下の作品：

<div class="container-fluid">
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
</div> <!-- /container -->
于 2013-02-27T05:22:37.710 に答える
0

まあ、それは数学です。実際の CSS/Bootstrap の問題ではありません...

Bootstrap のデフォルトのグリッド列は 12 であるため、行内に 5 つの等しいスパンを作成することはできません12 / 5 = 2.4。

于 2013-02-27T04:12:55.027 に答える