twitter-bootstrap - ブートストラップ 3 - 940px 幅のグリッド?

Question

新しいプロジェクトで Bootstrap 3 を使用しています。レイアウトは、最大幅 940 ピクセル (デスクトップなど)、12 列 (列 60 ピクセル、ガター 20 ピクセル) です。

に設定.containerしましたmax-width: 940px;が、何らかの理由でグリッドがオフになります。これにより、30px のガターを持つ 50px の列が得られます。したがって、ガターを 20px に削減し、10px を列に追加する必要があります。

しかし、どうすればいいですか？

Answer 1

最適なオプションは、元の LESS バージョンのブートストラップを使用することです (github から入手してください)。

variables.less を開き、// メディア クエリのブレークポイントを探します

// Large screen / wide desktop
@screen-lg:                  1200px; // change this
@screen-lg-desktop:          @screen-lg;

たとえば、最後のブレークポイントを 9999px に変更すると、このブレークポイントに到達できなくなり、サイトは常に前のメディア クエリをロードします。

@screen-md:                  992px; // this one has 940px container
@screen-desktop:             @screen-md;

列の幅とガターを変更するには、同じファイルを少し下にスクロールして、

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-tablet; 

ここで設定できます

最後に、css で bootstrap.less ファイルをもちろんコンパイルします。

乾杯

Answer 2

940 ビューを開始するには、bootstrap.responsive.css の次のセクションにコメントする必要があります。

@media (min-width: 1200px) {
}