0

.containerナビゲーションバー、ボディ、フッターでクラスを使用しています。

したがって、3 つすべてが左側でうまく整列します。containerしかし、授業の幅を広げたい。

デフォルトでは、幅は 1170 になっています。

media="screen, projection"
bundle-bundle_bootstrap_head.css:6139@media (min-width: 1200px)
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

ただし、幅を1300に拡張したいので、次を追加しましたmain.css

.container {
    width: 1200px;
}

しかし、これはうまくいかないようです。ページをリロードして CSS を調べると、1200 に取り消し線が引かれ、1170 がまだアクティブになっています。

質問

containerブートストラップでクラスのデフォルト幅を拡張するにはどうすればよいですか?

4

4 に答える 4

1

おそらく、またはmain.css( bootstrap.css) を読み込んで、そこで変更を行っているためです。その後、おそらく呼び出しbootstrap-responsive.cssて、変更を上書きしています。

1170px の.container幅はbootstrap-responsive.cssファイルから取得されます。これは、大型ディスプレイ画面 (1200px 以上) にデフォルトで割り当てられる幅です。bootstrap-responsive.cssそのため、ファイルの後に電話をかけていると想定していmain.cssます。

この点で、使用!importantはアンチパターン (悪い習慣) です。特にあなたのような一般的なものでは.container。これは、将来的に特異性の問題につながります。「ハッキング」するのではなく、実際に問題を修正して理解することをお勧めします。

于 2013-03-25T17:07:45.427 に答える
0

これを試して

!important をカスケード スタイル シートで使用して、パラメーターに優先順位を付けることができます。

.container {
   width: 1200px !important;
 }

詳細については、これを確認してください。

この場合、回避策として !important を使用できますが、このプロパティの使用は悪い習慣と見なされており、CSS の専門家は推奨していません。

于 2013-03-25T16:55:56.203 に答える
0

これが古いスレッドであることは知っていますが、最近、最新バージョンのブートストラップ (3.0) でコンテナーの幅を拡張する方法を探していて、これが他の人に役立つかもしれないと考えました。

コンテナの幅を設定するだけでなく、css に max-width プロパティも設定する必要があります。

container 
{
  width:1200px;
  max-width:1200px;
}

他の人が上で指摘したように、bootstrap.css ファイルの後にカスタム css をロードして、設定が再宣言されるようにしてください。

于 2014-09-26T13:58:13.977 に答える