34

Twitter Bootstrap 3 を使用してまったく新しいセクションを Web サイトに追加していますが、ヘッダーとフッターの {include} が破棄されるため、コンテナーはデスクトップの合計で 940 ピクセルを超えることはできません。

したがって、940 ピクセルは、列の場合は 12 x 60 = 720 ピクセル、ガターの場合は 11 x 20 = 220 ピクセルになります。十分に公平ですが、カスタマイズセクションに @ColumnWidth フィールド/設定が「ない」ため、これらを Bootstrap 3 にどのように入力しますか?

@container-lg-desktop と @container-desktop の両方を 940px に設定してみましたが、うまくいきません。

4

5 に答える 5

16

まず、スモール グリッドを検討してください。 http://getbootstrap.com/css/#grid-optionsを参照してください。750 px の最大コンテナー幅はおそらく小さいでしょう (また、読んでください:なぜ Bootstrap 3 はコンテナーの幅を特定のサイズに強制するのですか? )

Small グリッドを使用する場合、メディア クエリを使用して max-container 幅を設定します。

@media (最小幅: 768px) { .container { 最大幅: 750px; } }

次に、この質問もお読みください: Bootstrap 3 - 940px width grid? 、重複の可能性はありますか?

列の場合は 12 x 60 = 720px、11 x 20 = 220px

また、グリッドの両側に 20 ピクセルのガターがあるため、220 + 720 + 40 で 980 ピクセルになります

「いいえ」@ColumnWidthはありません

列の幅は、variables.less の設定に基づいて動的に計算されます。@grid-columnsとを設定できます@grid-gutter-width。列の幅は、mixins.less の grid.less を介してパーセンテージとして設定されます。

.calc-grid(@index, @class, @type) when (@type = width) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}

update @grid-gutter-width を 20px;、@container-desktop: 940px;、@container-large-desktop: @container-desktop に設定し、ブートストラップを再コンパイルします。

于 2013-10-17T18:56:33.647 に答える
5

ブートストラップをコンパイルしたくない場合は、以下をコピーしてカスタム css ファイルに挿入します。元のブートストラップ css ファイルを変更することはお勧めしません。また、cdn からロードしている場合、ブートストラップの元の css を変更することはできません。

これをカスタム css ファイルに貼り付けます。

@media (min-width:992px)
    {
        .container{width:960px}
    }
@media (min-width:1200px)
    {
        .container{width:960px}
    }

ここでは、コンテナーを収容できるものすべてに対してコンテナーを 960px に設定し、残りのメディア サイズは既定値のままにしています。この問題では、940px に設定できます。

于 2015-02-25T08:05:13.180 に答える
1

うまくいかない場合は、「!Important」を使用してください

@media (最小幅: 1200px) { .container { 幅: 970px !重要; } }

于 2015-05-29T18:59:48.620 に答える