68

ここにサンプルリンクがあります: 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クラスでラップできません。

流動的な（全ページ幅）レイアウトにする方法は？(水平スクロールバーなし)

これらのマークアップで。結果を表示すると、Xスクロールバーが表示されるため、左右にスクロールできますが、そうではありません。

編集済み: 2015-12-09
既に回答を得ており、Bootstrap は 3.1.0 以降の修正を既にリリースしています

4

21 に答える 21

57

私もそれを持っていて、彼らがそれを修正するのを待っている間、私はこの恥のcssを追加しました:

body { overflow-x: hidden;}

それは恐ろしい代替手段ですが、うまくいきます。問題が修正されたら、喜んで削除します。

issueで指摘されているように、他の代替手段はオーバーライドすること.rowです:

.row {
  margin-left: 0px;
  margin-right: 0px;
}
于 2013-08-27T09:31:42.760 に答える
11

これは BS 3 の既知の問題です - https://github.com/twbs/bootstrap/issues/9862?source=cc

最新のビルドを使用して Bootply でテストしたので、GitHub で最新の更新/修正を確認してください。

Bootstrap 3 では、行の負のマージンを相殺するためにor.row内で使用する必要があります。これにより、水平スクロールバーがなくなります。.container.container-fluid

ドキュメントから...

「適切な配置とパディングのために、行は .container (固定幅) または .container-fluid (全幅) 内に配置する必要があります。」

ブートストラップ 4

container> row>関係はcol3.x と同じように機能します...

「コンテナーは、Bootstrap の最も基本的なレイアウト要素であり、デフォルトのグリッド システムを使用するときに必要です」

于 2013-08-23T09:29:52.900 に答える
8

私があなたを正しく理解していれば、メディアクエリの後にこれを追加すると、デフォルトのグリッドの幅制限が上書きされます。100% 幅のレイアウトが必要なブートストラップ 3 で動作します

.container {
   max-width: 100%;
   /* This will remove the outer padding, and push content edge to edge */
   padding-right: 0;
   padding-left: 0;
 }

次に、コンテナ内に行要素とグリッド要素を配置できます。

于 2013-08-29T03:14:32.973 に答える
5

ここにちょうど私の2セント。ほとんどの場合、これは私と同じように機能します。

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}
于 2013-10-24T06:14:34.840 に答える
3

私は同じ問題（流動的なレイアウトが必要）に遭遇しましたが、小さな画面用に列を再配置するなどの応答オプションを維持したかったため、in variables.less に小さな変更を加えました。

// Large screen / wide desktop  (last row of file)
@container-lg-desktop:        100%; //((1140px + @grid-gutter-width));

この値は、grid.less で 1 回使用され、sets

@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>

お役に立てれば！

于 2013-10-30T15:12:13.823 に答える
2

これは私にとってはうまくいきました。FF、Chrome、IE11、IE10でテスト済み

.row {
    width:99.99%;
}
于 2014-04-28T13:45:36.670 に答える
1

それでも誰かにとって実際の場合、私の解決策は次のとおりです。

.container{
    overflow: hidden;
    overflow-y: auto;
}
于 2015-12-08T22:38:27.267 に答える
1

ボディに適用すると、水平スクロールバーが消えるようです

overflow-x: hidden;
于 2015-08-12T21:27:50.017 に答える
1

この回避策を見つけました

.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;
}
于 2014-03-27T13:45:11.210 に答える
1

これが私のために働いたものです。右側の小さな余白を削除するためにインラインでスタイルを追加しました。私はインライン スタイリングを行うのはあまり好きではありませんが、html 内のこの唯一のスタイル属性のおかげで、他の方法では適切に分離されたコードにハック ジョブが接合されたことを簡単に思い出すことができます。また、ブートストラップのデフォルト スタイルシートの前後に外部スタイルが読み込まれるという懸念も解消されます。

<div class="row" style="margin-right:0px;">
  <div class="col-md-6">
  <div class="col-md-6">
</div>
于 2015-01-15T21:14:15.670 に答える
0

最も関連性の高いコメントを 1 つの回答にまとめると、次のようになります。

  • これは既知のバグです
  • 回避策はありますが、必要ないかもしれません (読み進めてください)
  • これは、要素がコンテナー流体div または別の div を含む内部ではなく、ボディ内に直接配置されている場合に発生します。それらを本体に直接配置することは、ローカルでテストするときにほとんどの人が行うこととまったく同じです。コードを完全なページ (コンテナ流体または別のコンテナ div 内) に配置すると、この問題に直面することはありません (何も変更する必要はありません)。
于 2017-01-10T01:46:56.757 に答える
0

すべての子が行である場合、 body 要素の側面に 10px のパディングを追加できます

body {
  padding: 0 10px;
}

HTML マークアップが次のような場合:

<body>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</body>

行には 10 ピクセルの負のマージンがあります。それがオーバーフローの原因です。ボディに 10px のパディングを追加すると、互いに打ち消し合います。

于 2014-07-23T08:59:20.980 に答える