水平スクロールバーなしでbootstrap 3流体レイアウトを作成する方法
ここにサンプルリンクがあります： http://bootply.com/76369
これは私が使用するhtmlです。
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
ブートストラップ3には、コンテナ流体と行流体がありません。
固定レイアウトになるため、.containerクラスでラップすることはできません。
それを流動的にする方法（全ページ幅）layout？（水平スクロールバーなし）
これらのマークアップで。結果を表示すると、x-scrollバーが表示されるため、左右にスクロールしてはいけません。
編集済み：2015-12-09
既に回答があり、Bootstrapはすでに3.1.0以降の修正をリリースしています
これはv3.1.0で導入されました： http://getbootstrap.com/css/#grid-example-fluid
コミット ＃62736046 「全角コンテナおよびレイアウト用の.container-fluidバリエーション」を追加。
私もそれを手に入れて、彼らがそれを修正するのを待っている間に、私はこの恥のCSSを追加しました：
body { overflow-x: hidden;}
それは恐ろしい代替手段ですが、動作します。問題が修正されたら削除させていただきます。
issue で指摘されている他の代替手段は、.rowをオーバーライドすることです。
.row {
margin-left: 0px;
margin-right: 0px;
}
これはBS 3の既知の問題です。 https://github.com/twbs/bootstrap/issues/9862?source=cc
Bootplyで最新のビルドを使用してテストしたので、GitHubで最新のアップデート/修正を確認してください。
Bootstrap 3では、.rowまたは.container内で.container-fluidを使用して、行の負のマージンを相殺する必要があります。 これにより、水平スクロールバーが削除されます。
ドキュメントから...
「行は、適切な配置とパディングのために、.container（固定幅）または.container-fluid（全角）内に配置する必要があります。」
ブートストラップ4
container> row> col関係は、3.xと同じように機能します...
「コンテナはBootstrapの最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する場合に必要です」
正しく理解できた場合、メディアクエリの後にこれを追加すると、デフォルトグリッドの幅制限が上書きされます。 100％幅のレイアウトが必要なbootstrap 3で動作します
.container {
max-width: 100%;
/* This will remove the outer padding, and Push content Edge to Edge */
padding-right: 0;
padding-left: 0;
}
次に、コンテナ内に行要素とグリッド要素を配置できます。
2014年からのBootstrapドキュメントからの更新：
グリッドと全幅レイアウト完全に流動的なレイアウト（サイトがビューポートの幅全体を引き伸ばすことを意味する）を作成しようとする人々は、グリッドコンテンツを含む要素でpadding：0 15px;でオフセットする必要があります。 margin：0 -15px; .rowsで使用されます。
ちょうど私の2セントです。私にとってもそうであったように、ほとんどこれはあなたのために働くでしょう。
body > .row {
margin-left: 0px;
margin-right: 0px;
}
私は同じ問題に遭遇しましたが（流動的なレイアウトを望んでいます）、小さな画面用に列などを再配置することでレスポンシブなオプションを維持したかったため、variables.lessの小さな変更で終わりました：
// Large screen / wide desktop (last row of file)
@container-lg-desktop: 100%; //((1140px + @grid-Gutter-width));
この値はgrid.lessで1回使用され、設定されます
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-lg-desktop;
}
....
}
その結果、1200pxを超えるグリッドは流動的です（水平スクロールバーなし）。その下には、通常のレスポンシブルールが適用されます。もちろん、これを他のメディアクエリにも同様に簡単に設定できます。
自分で.lessを編集およびコンパイルしたくない場合は、独自のスタイルシートのmaxwidthを次のようにオーバーライドできます。
@media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */
body .container {
max-width: 100%;
}
}
以下のように、コンテナを含む通常のBootstrapグリッド構文を使用することを前提としています。
<div class="container">
<div class="row" >
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
お役に立てれば！
最新バージョンのTwitter Bootstrapでは、レイアウトはデフォルトでは流動的です。したがって、レイアウトを流動的として宣言するために追加のクラスは必要ありません。
さらに参照できます-
http://bassjobsen.weblogs.fm/migrate-your-templates-from-Twitter-bootstrap-2-x-to-Twitter-bootstrap-3/http：// blog .getbootstrap.com /
これは私のために働いた。 FF、Chrome、IE11、IE10でテスト済み
.row {
width:99.99%;
}
本体に適用すると、水平スクロールバーがなくなります
overflow-x: hidden;
それでも誰かにとって実際の場合、私の解決策は次のとおりでした：
.container{
overflow: hidden;
overflow-y: auto;
}
Bootstrap 3では、ボディのすぐ下に列を配置すると、水平スクロールバーのない滑らかなレイアウトが得られます。
<body>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</body>
Bootstrap 3.0バージョンは扱いにくいため、この問題の修正が追加され、Bootstrap 3.1でcontainer-fluidが返される可能性があります。しかし、それまでは私が使用している修正があります：
まず、カスタムコンテナが必要で、幅を100％に設定してから、行マージンの配置を修正し、必要に応じてnavbarも修正する必要があります。
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
}
/*fix row -15px margin*/
.container-fluid {
padding: 0 15px;
}
/*fix navbar margin*/
.navbar{
margin: 0 -15px;
}
/*fix navbar-right margin*/
.navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
ルートdivでcontainer-fullクラスとcontainer-fluidクラスをスタックでき、後でcontainer-fluidを使用できます。
より多くの情報が必要な場合はお知らせください。
この回避策を見つけました
.row {
margin-left: 0;
margin-right: 0;
}
[class^="col-"] > [class^="col-"]:first-child,
[class^="col-"] > [class*=" col-"]:first-child
[class*=" col-"] > [class^="col-"]:first-child,
[class*=" col-"]> [class*=" col-"]:first-child,
.row > [class^="col-"]:first-child,
.row > [class*=" col-"]:first-child{
padding-left: 0px;
}
[class^="col-"] > [class^="col-"]:last-child,
[class^="col-"] > [class*=" col-"]:last-child
[class*=" col-"] > [class^="col-"]:last-child,
[class*=" col-"]> [class*=" col-"]:last-child,
.row > [class^="col-"]:last-child,
.row > [class*=" col-"]:last-child{
padding-right: 0px;
}
これは私のために働いたものです。インラインのスタイルを追加して、右側の小さな余白を削除しました。インラインスタイリングはあまり好きではありませんが、HTMLのこの孤独なスタイルの属性により、分離されたコードにスプライスされたハックジョブについて簡単に思い出すことができます。また、bootstrapデフォルトスタイルシートの前または後に読み込む外部スタイルの心配もなくなります。
<div class="row" style="margin-right:0px;">
<div class="col-md-6">
<div class="col-md-6">
</div>
デフォルトではすでに流動的です。 col-md-6の代わりに幅を狭くして流動的にしたい場合は、col-sm-6またはcol-xs-6を使用します。
bootstrap cssを乱すことなくこの問題を修正し、次のバージョンの修正を待つことができます。そのため、独自のclass .container-fluidをパディングで定義することで、行を簡単にラップできます。
//Add this class to your global css file
<style>
.container-fluid {
padding: 0 15px;
}
</style>
//Wrap your rows in within this .container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-md-3">content</div>
<div class="col-md-9">content</div>
<div class="col-md-3">content</div>
</div>
</div>
最も関連性の高いコメントを1つの回答にまとめる：
- これは既知のバグです
- 回避策はありますが、必要ない場合があります（続きを読む）
- 要素がcontainer-fluiddivまたは別のdivを含む内部ではなく、本体の内部に直接配置されると発生します。身体に直接配置することは、ほとんどの人が局所的に物をテストするときに行うこととまったく同じです。完全なページにコードを配置すると（コンテナ流体または別のコンテナdiv内）、この問題に直面することはありません（何も変更する必要はありません）。
私を助けた唯一のことは、私のhtml DOMの一番上のmargin:0pxに<div class="row">を設定することでした。
これもこの問題を解決するための最も魅力的な方法ではありませんでしたが、1つの場所にあるため、インラインに配置しました。
Fyiとして、コンテナ流体と見かけのbootstrap修正により、表示されているページの両側にホワイトスペースが増加するだけでした...（（問題-読む価値がある。
子要素がすべて行である場合、body要素の両側に10ピクセルのパディングを追加できます
body {
padding: 0 10px;
}
hTMLマークアップが次のような場合：
<body>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</body>
行には10ピクセルの負のマージンがあります。それがオーバーフローの原因です。ボディに10pxのパディングを追加すると、それらは互いにキャンセルされます。