2013-10-27 7 views
24

私はTwitter Bootstrapを使いこなしていて、.rowが画面の長さよりも広いことに気づいた。ブートストラップ3.0は、私はこれを経験していない出てきたときはここでTwitter Bootstrap 3.0の行がウィンドウより広い

example

です。

右側の余分なスペースは私がなぜか、どのように私は自分自身をだましていますし、検索が参考にされていない上の任意の進捗状況をせずに時間のためにこれで明白なされているmargin-right: -15px;

から来ています。

私は明らかに分かりません。なぜウィンドウ幅(スクロールバーを強制する)を超えてこのスペースがあるのか​​、それを回避する方法を理解したいと思います。私は行が100%に一致すると思った。

答えて

30

.rowで使用margin: 0 -15px;を相殺するためにpadding: 0 15px;で正解を含む要素でのグリッドコンテンツをラップする必要があります)、周囲のdivにcontainer-fluidクラスを使用することです:

<div class="container-fluid"> 
    <div class="row"> 
    Content 
    </div> 
</div> 
+0

しかし、バグは複製できなくなり、.container-fluidが追加されています。これは正解となりましたので、受け入れられた答えをあなたのものに変更しました。+1 –

+0

これは、いくつかの列を内部に置くと** **動作しません。 'ブートストラップ3.2.0'、[Anesの答え](http://stackoverflow.com/a/24028831/3744681)は私のために働いた。 – Jahid

+0

ありがとう!これは私がこれを理解するのに長い道のりを切った。 – Schylar

2

あなたの行は、コンテナクラスが適用されたdiv内に配置する必要があります。

例えば

<div class="container"> 
    <div class="row"> 
     Content 
    </div> 
</div> 
+0

の幅ですありがとね。私はそれを理解しています。コンテナの目的は、物を中心に置くことです。それがなければ、行が100%の幅になると予想していたでしょうか?私は顧客のコンテナを作る必要がありますか? –

5

EDIT >>

これは、以前に受け入れ答えました。誰かが古いバージョンのサイトであれば元に戻す。

EDIT < <

それはしばらくの間、未固定されているようだバグ

です。たぶん3.1の正しい修正。

bodyの要素のようです。彼らは追加した/このcommit

に特にこのライン完全流体のレイアウトを作成するために探している「人々(あなたのサイトには、ビューポートの幅全体を伸ばし意味を)それのいくつかを明確以外

https://github.com/twbs/bootstrap/issues/10711

7

私はちょうどブートストラップに.rowからのmargin-left &マージン右を除去することによって、それを修正しても設定することで、それは100%

+0

ようこそスタックオーバーフロー。あなたは受け入れられた答えでどのように改善しますか? –

+0

問題は、左右のマージンを取り除くと、ブートストラップのアーキテクチャーの基盤の1つが完全に破壊されることです。 – dudewad

+0

答えが受け入れられませんでした。しかし、これは本当の答えのようです。 –

関連する問題