10

Bootstrap を使用して新しい Web サイトを作成したいのですが、幅を 100% にする必要がありますが、滑らかにしたくありません。少なくとも今のところは。

私が抱えている問題は、ブートストラップ標準を使用すると960pxに制限され、流動レイアウトでは全幅ですが、ウィンドウのサイズが縮小されたときに要素を移動して積み重ねるようにすることで、流動レイアウトのように動作することです。

静的ブートストラップ レイアウトで幅を 100% にする方法はありますか?

4

5 に答える 5

7

100% 幅 ... 静的

これは少し矛盾した表現です。幅 100% のレイアウトは静的ではありません。

Bootstrap は、.containerクラスを使用して定義済みの幅を設定します。デフォルトよりも大きくしたい場合は、これを目的のページ幅に増やします。span*ただし、Bootstrapとoffset*クラスのサイズ変更には、それに応じて幅を調整する必要があることに注意してください。

于 2013-03-04T15:43:44.300 に答える
3

主な質問への回答方法がよくわかりませんが、これがあなたが望むものですOP

上記のように、.container を使用せず、次のような独自のクラスを使用してください。

.my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

次に、グリッドを作成するときに、列に col-xs-* を使用します。これで、「モバイル」ビューでスタックしない 100% 幅のサイトが作成されます。90年代へようこそ;)

于 2013-10-09T19:36:04.287 に答える
3

bootstrap-responsive.cssレスポンシブ機能を無効にするために、を含めないでください。

ガター/マージンが必要ない場合は.container、コンテンツをコンテナーの外に置くことができますが、コンテンツのレイアウトを自分で維持する必要があることに注意してください (グリッドを使用することはできますが、コンテンツを中央に配置する機能が失われます)。 Bootstrap コンポーネントの幅を制御する.navbar必要があります。.container

私の作品の 1 つは、すべてのコンテンツを保持するために全画面カルーセルを必要とするため、コンテンツ.containerを中央に配置するためにコンテンツをラップします。

ここに画像の説明を入力

于 2013-03-05T03:49:25.143 に答える
0

あなたが言いたいのは、側面にマージン/パディングを入れたくないということだと思います。(これがメッセージを理解する唯一の方法です。幅 100% は画面全体のサイズになるため、静的になることはありません。ウィンドウの大きさによってサイズが変わります)

ユースケースや JSFiddle がないため、正確なコードを提供することはできませんが、body に margin:0 と padding:0 があることを確認してから、Firebug または Chrome Web で他の div を探す必要があります。開発ツール。

レイアウトを流動的にしたいが、特定のポイントで成長を止めたい場合は、ボディまたは一般的なコンテナー/ラッパー要素に max-width:1000px (たとえば) を適用する必要があります。

于 2013-03-04T16:15:25.920 に答える