グリッドシステムの列のブートストラップ数を変更してください

Question

9列しか持っていませんが、それらをdivの100％に広げたいと思います。これはどうすればできますか？

<div class="row"> 
    <div class="col-lg-1 grid-head">NSW</div> 
    <div class="col-lg-1 grid-head">VIC</div> 
    <div class="col-lg-1 grid-head">QLD</div> 
    <div class="col-lg-1 grid-head">WA</div> 
    <div class="col-lg-1 grid-head">SA</div> 
    <div class="col-lg-1 grid-head">TAS</div> 
    <div class="col-lg-1 grid-head">ACT</div> 
    <div class="col-lg-1 grid-head">NT</div> 
    <div class="col-lg-1 grid-head">NZ</div> 
</div> 

次に、ページを縮小するとき、またはモバイルデバイスを縮小するとき。テーブルのように、どうやって置くことができますか？

<div class="row"> 
    <div class="col-lg-1 grid-head">under NSW</div> 
    <div class="col-lg-1 grid-head">under VIC</div> 
    <div class="col-lg-1 grid-head">under QLD</div> 
    <div class="col-lg-1 grid-head">under WA</div> 
    <div class="col-lg-1 grid-head">under SA</div> 
    <div class="col-lg-1 grid-head">under TAS</div> 
    <div class="col-lg-1 grid-head">under ACT</div> 
    <div class="col-lg-1 grid-head">under NT</div> 
    <div class="col-lg-1 grid-head">under NZ</div> 
</div> 

Answer 1

9つの項目を3つのグループに分けます。

このようにして、各グループにcol-*-4の行に何かを与えます。

だからあなたHTMLが

<div class="col-lg-4 PA"> 
    <div class="col-lg-4 grid-head">NSW</div> 
    <div class="col-lg-4 grid-head">VIC</div> 
    <div class="col-lg-4 grid-head">QLD</div> 
    </div> 
    <div class="col-lg-4 PA"> 
    <div class="col-lg-4 grid-head">WA</div> 
    <div class="col-lg-4 grid-head">SA</div> 
    <div class="col-lg-4 grid-head">TAS</div> 
    </div> 
    <div class="col-lg-4 PA"> 
    <div class="col-lg-4 grid-head">ACT</div> 
    <div class="col-lg-4 grid-head">NT</div> 
    <div class="col-lg-4 grid-head">NZ</div> 
    </div> 

のようになります。私は、グリッド・ヘッドへのパディングを削除するPAクラスを追加しました。 CSSを少しきれいにしてパディングを削除したら、必要な状態になります。ここで

はworking demo

Answer 2

であることもできcustomize your Bootstrap's file列の数を変更することもできます。

変更する属性は@grid-columnsです。ケースに9を設定します。

あなたのカスタマイズしたブートストラップのファイルをdownloadにするだけで、これをデフォルトに置き換えてください。あなたのページ全体に@grid-columns = 9が適用されることに注意してください。