ブートストラップ 2.0.4 をデフォルトの 12 列ではなく 16 列または 24 列に設定するための助けが必要です。何が間違っているのか理解できません。ブートストラップ サイトでカスタマイズ オプションを試し、変数のグリッド変数を変更してみました。 .less ファイルを作成し、Crunch を使用して bootstrap.less を再コンパイルしますが、両方の試行で同じ結果が得られます。まだ 12 列です !!! div を span12 に設定しようとすると、画面全体が使用されますか?
誰かが私が間違っていることを教えてくれますか、または誰かが16列と24列のバージョンを生成して私に送ってくれれば完璧です
この方法は、古いバージョンの Bootstrap - バージョン 2.3.1 用です。
このリンクをクリックしてブートストラップをカスタマイズします: http://twitter.github.com/bootstrap/customize.html
このような例が見つかります。必要に応じてパラメーターを変更します。
16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px
16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px
24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px
24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
24列の場合、メインdivを分割できます
<div class="col-md-12">
<div class="col-md-6">
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
</div>
<div class="col-md-6">12 here</div>
</div>
変更が少ないほどシンプル - http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization
そこの変数を必要なものに変更する必要があります-
例えば
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px
流体グリッドを使用している場合は、これらの変数も比例して変更する必要があります。そうしないと、span12 が幅の 100% を占め、span24 が 200% を占めることになります。
@fluidGridColumnWidth
@fluidGridGutterWidth
述べたように：
カスタマイズ方法
グリッドを変更するということは、3 つの @grid* 変数を変更し、Bootstrap を再コンパイルすることを意味します。variables.less のグリッド変数を変更し、文書化されている 4 つの方法のいずれかを使用して再コンパイルします。さらに列を追加する場合は、それらの CSS を grid.less に必ず追加してください。
変数を変更して、新しい CSS をここからダウンロードできます: http://twitter.github.com/bootstrap/download.html#variables
16 列で動作するはずのコンパイル済みの例を次に示します (テストしていません。動作方法を教えてください): https://s3.amazonaws.com/intenex/bootstrap16columns.zip
編集: 列のカスタム数を使用したグリッドの作成が復元され、Bootstrap のカスタマイズ ページで実行できます。
理由は不明ですが、Bootstrap の最新バージョン (3.0.0/1) では、12 列以外のグリッドを作成できません。これは非常に残念なことです。
現在私たちができること、そしてさらにカスタマイズされたブートストラップ パッケージを作成できるようにすることは、独自の Bootstrap カスタマイザーをセットアップすることです。
編集：試してみました。Docs GitHub ページのガイドラインに従いながら、すべての依存関係のインストールは非常にスムーズに進みました。
生成された 24 列のグリッドのサンプル
Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
16列
960px
45px *16 = 720 列
15px *16 =240 ガター
1200px
53px *16 =848列
22px *16 =352 ガター
768ピクセル
33px *16 =528列
15px *16 =240 ガター
プロジェクトに Grid 30 列を使用しています (Grid 24 および 100 も利用可能)
https://github.com/zirafa/bootstrap-grid-only
要件に応じて、いくつかのカスタマイズが必要になる場合があります
2018年更新
最新の Bootstrap 4 でこの質問を再検討します。Bootstrap 4 はフレックスボックスであり、自動レイアウト列が含まれているため、任意の数のn列を持つレイアウトを簡単に作成できます...
16列
<div class="row">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
... to 16
</div>
</div>
24列
<div class="row">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
... to 24
</div>
</div>
デモ: https://www.codeply.com/go/4sQGt2qKyr
次のように、幅属性をパーセンテージでオーバーライドできます。
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
レスポンシブ機能も維持されます。