web-dev-qa-db-ja.com

使用方法bootstrap 16または24列

bootstrap 2.0.4をデフォルトの12列ではなく16または24列に設定するためのヘルプが必要です。何が間違っているのか理解できません。bootstrapのカスタマイズオプションを試しました。 _サイトと私は、variables.lessファイルのグリッド変数を変更し、Crunchを使用してbootstrap.lessを再コンパイルしようとしましたが、両方の試行で同じ結果が得られました。 divをspan12に設定しようとすると、画面全体が表示されますか？

誰かが私がやっている間違っていることを教えてもらえますか、誰かが16列と24列のバージョンを生成して完璧なものを私に送ることができれば

twitter-bootstrapcustomizationless
24
Joseph Girgis

このメソッドは、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
19
Hasan Atbinici

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>

codepenデモ

13
İsmail Hakkı Şen

少ない変更で十分にシンプル- 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つの方法のいずれかを使用して再コンパイルします。列を追加する場合は、grid.lessの列にCSSを追加してください。

ここで変数を変更し、新しいcssをダウンロードできます。 http://Twitter.github.com/bootstrap/download.html#variables

16列で動作するコンパイル済みの例を次に示します（テストしていないので、動作を教えてください）： https://s3.amazonaws.com/intenex/bootstrap16columns.Zip

11
Intenex

編集：カスタムの列数のグリッドの作成が復元され、Bootstrapの カスタマイズページ 。で実行できます

私には不明な理由により、Bootstrap（3.0.0/1）の最新バージョンでは、12列とは異なるグリッドを作成できません。これは大きな恥です。

現在できることは、さらにカスタマイズされたbootstrap=パッケージを作成できるようにするために、独自のBootstrapカスタマイザをセットアップすることです。

編集：私はちょうどそれを試しました。 Docs GitHubページのガイドラインを守りながら、すべての依存関係のインストールは非常にスムーズに進みました。

生成されたサンプル 24列グリッド

Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
4
Maciej Gurban

16列

960px

45px * 16 = 720列

15px * 16 = 240ガター

1200px

53px * 16 = 848列

22px * 16 = 352ガター

768px

33px * 16 = 528列

15px * 16 = 240ガター

3
User

2018年に更新

最新のBootstrap 4についてこの質問を再検討します。Bootstrap 4はflexboxであり、 auto-layout列 が含まれているため、簡単に任意の数のレイアウトを作成しますn columns...

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

次も参照してください： N number of columns in Bootstrap 4

1
Zim

次のようなパーセンテージでwidth属性をオーバーライドできます。

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

レスポンシブ機能も維持します。

0
Chieu Nhat Nang

24列を設定：

960
35px列
5pxガター

1200
40px列
10pxガター

768
29px列
3pxガター

0
User

ネストを使用して16列を実行するために見つけた迅速かつ簡単な方法は次のとおりです...

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
<div class="row">
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
</div>
<!-- row -->
0
nalcus

プロジェクトにグリッド30列を使用します（グリッド24および100も使用可能）

https://github.com/zirafa/bootstrap-grid-only

要件に応じてカスタマイズが必要になる場合があります

0
Arun Prasad E S