私はこれに似たレイアウトを実現しようとしています：http： //dribbble.com/shots/829195-Slate/attachments/86422
私のプロジェクトでは、レスポンシブデザインのTwitterBootstrapを使用しています。Bootstrapで全幅レイアウトを実装することは可能ですか？
問題は、私が読んでいたものから、流動的なレイアウトがブートストラップ3.0で削除され、レスポンシブデザインの幅が固定されていることです。
質問する
154252 次
10 に答える
128
ここに素晴らしいチュートリアルがあります：bootstrap-3-grid-はじめにそしてあなたの質問に対する答えは<div class="container-fluid"> ... </div>
于 2013-08-27T21:26:53.037 に答える
43
受け入れられた答えはBS3と同じ惑星上にないので、ほぼ全幅の機能を実現するために使用しているものを共有します。
まず、これは不正行為です。サイトを表示している画面のサイズによっては、実際には流動的な幅ではありませんが、流動的な幅のように見えます。
BS3と流動的な幅のサイトの問題は、この「モバイルファースト」アプローチを採用していることです。これには、デスクトップと見なされるもの（1200px）までのすべての異常な画面幅を定義する必要があります。1900pxのラップトップで作業しています。ワイドスクリーン-したがって、BS3がデスクトップサイズの幅であると考えるコンテンツの両側に350pxが表示されます。
彼らは10の画面幅を定義しました（実際には5つだけですが、とにかく）。それらは一般的な幅であるため、変更するのはあまり快適ではありません。そこで、コンテナクラスの幅を決定するときに、BSが選択できるいくつかの追加の幅を定義することにしました。
BSを使用する方法は、Bootstrapが提供するすべてのLESSファイルを取得し、variables.lessファイルを省略して独自のファイルを提供し、最後に独自のファイルを追加して、変更したいものをオーバーライドすることです。私のlessファイル内に、2つの一般的な画面幅設定を実現するために以下を追加します。
@media screen and (min-width: 1600px) {
.container {
max-width: (1600px - @grid-gutter-width);
}
}
@media screen and (min-width: 1900px) {
.container {
max-width: (1900px - @grid-gutter-width);
}
}
これらの2つの設定は、さまざまな画面幅を実現するために必要なことの例を示しています。ここでは、1600pxと1900pxで全幅が得られます。1600未満の場合-BSは1200pxの幅にフォールバックし、次に768pxにフォールバックし、以下同様に-電話のサイズに縮小します。
サポートするサイズが大きい場合は、このような@mediascreenステートメントをさらに作成してください。代わりにCSSを作成している場合は、使用されたガター幅を特定し、それをターゲット画面幅から差し引く必要があります。
アップデート：
Bootstrap 3.0.1以降（これまでのところ）-設定@container-large-desktopするのと同じくらい簡単です100%
于 2013-05-03T22:56:03.780 に答える
11
アップデート：
Bootstrap 3は、この質問が1月に最初に回答されてからリリースされているため、BS3ユーザーの場合は、BS3のドキュメントを参照してください。まだBS2を使用している場合は、元の回答が引き続き適用されます。2から3への切り替えに関心がある場合は、移行ガイドを参照してください。
元の答え：
ブートストラップ2ドキュメントから：
.rowを.row-fluidに変更して、任意の行を「fluid」にします。列クラスはまったく同じままであるため、固定グリッドと流動グリッドを簡単に切り替えることができます。
コード
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
これは、コンテナの幅を流動的な値に設定することと併せて、希望のレイアウトを取得できるようにする必要があります。
于 2013-01-10T18:19:43.433 に答える
7
最新のBootstrap（3.1.x）の時点で、.container-fluidクラスを使用するための流動的なレイアウトを実現する方法。
参考のためにブートストラップグリッドを参照してください
于 2014-03-11T12:24:31.920 に答える
5
別のクラスを作成し、ブートストラップクラスと一緒に追加するだけcontainerです。ただし、使用することもできcontainer-fluidます。
<div class="container full-width">
<div class="row">
....
</div>
</div>
CSSの部分は非常に単純です
* {
margin: 0;
padding: 0;
}
.full-width {
width: 100%;
min-width: 100%;
max-width: 100%;
}
これがお役に立てば幸いです、ありがとう！
于 2015-04-16T06:39:27.620 に答える
4
*{
margin:0
padding:0
}
コンテナの幅を確認してください：％100
于 2013-01-10T17:16:20.690 に答える
4
Bootstrap 3では、列はパーセンテージを使用して指定されます。（Bootstrap 2では、これは列/スパンが.row-fluid要素内にある場合にのみ当てはまりましたが、それはもはや必要ではなく、そのクラスはもはや存在しません。）を使用する場合.container、@Michaelは絶対に正しいです。固定幅のレイアウトで。ただし、.container要素の使用を避ける場合は、良好な状態である必要があります。
<body>
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
</body>
ボディのマージンはすでに0になっているので、端まで立ち上がることができるはずです。（列にはまだ両側に15pxのパディングがあるため、デザインでそれを考慮する必要があるかもしれませんが、これで止まることはなく、Bootstrapをダウンロードするときにいつでもこれをカスタマイズできます。）
于 2013-08-26T04:22:59.833 に答える
3
これは、Bootstrap 3を使用した幅100％、高さ100％のレイアウトの例です。
于 2013-09-12T11:42:41.513 に答える
2
BS3で最も簡単な方法は、BS3CSSによって設定された最大幅とパディングをこのようにリセットすることです。あなたは再びコンテナ流体を手に入れます：
.container{
max-width:100%;
padding:0;
}
于 2013-09-12T11:06:32.723 に答える
-2
左右のパディングと100％の幅が必要なクラス「col-md-12」を使用できると思います。これは、2番目のブートストラップからのコンテナ流体の良い代替品のようです。
于 2013-11-11T13:05:24.073 に答える