web-dev-qa-db-ja.com

bootstrap=内でcontainer-fluidを使用すると、水平スクロールバーが発生します

以下に簡単な例を示します。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

フィドルのデモ

ブラウザに結果が表示されると、水平スクロールバーが表示されます。

なぜこうなった？

何が間違っていますか？

csstwitter-bootstraptwitter-bootstrap-3grid-system
44
agis

container-fluidは、もともとBootstrap 3.0から削除されましたが、 3.1.1で再び追加されました

これを修正するには、either：

  1. Bootstrapスタイルシート）の新しいバージョン を使用します

    Fiddle）の新しいスタイルシートを使用したデモ

  2. または自分でクラスを追加します

    .rowは、左右に15pxマージンを追加します。 .container-fluidは画面幅の100%を埋めるため、余分な余白スペースがオーバーフローの問題を引き起こします。

    これを修正するには、.container-fluidクラスにパディングを追加する必要があります

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

    Fiddle）のカスタムコンテナクラスを使用したデモ

52
KyleMit

私もこの問題に直面しました。問題の原因がわかりません。 Twitter Bootstrapのバグかもしれません。ここで、overflow-x:hiddenをbodyタグに手動で追加する必要があります。

body { 
   overflow-x: hidden;
}

Jsfiddle

37
lvarayut

私の場合、この修正はうまくいきました。

.row {
  margin-left: 0;
  margin-right: 0;
}
9
Viktor L
.row{
margin: 0px;
}

クイックイージーフィックスこれで十分です

4
Christopher Clear

行クラスをコンテナでカプセル化してください。

<div class="container">
    <div class="row">
        text
    </div>
</div>

コンテナは、-15で行の+15マージンをオフセットします。

2
David Stack

全クラスの行に新しいクラスを追加し、CSSファイルを上書きすることで、行をダーティハックできます。

.noLRMar{
  margin-right: 0 !important;
  margin-left: 0 !important;
 }
<div class="row noLRMar">
  
 </div>
2
Omar Noor

Bootstrap 3.3.5では、中（md）から小（sm）の画面サイズへの変更に近い特定の幅で水平スクロールバーが表示されていました。div.rowとdiv.container-fluidの間にdiv.containerを追加私のためにそれを修正しました。

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

margin:0;を行に追加すると、一部のスタイル要素が壊れます。

0
user5507241

私の場合、@grid-Gutter-widthが奇数になったことが原因です。

mixins/grid.less

.container-fixed(@Gutter: @grid-Gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@Gutter / 2));
  padding-right: ceil((@Gutter / 2));
  &:extend(.clearfix all);
}

したがって、奇数のGutter-widthその後、パディングが不均一になり、水平スクロールバーが表示されます。

0
Harsh Vakharia