2016-08-20 8 views
4

divの左右に空白があるのはなぜですか?divが水平方向に完全に伸びない

enter image description here

render() { 
    return (
     <div className="container intro-body"> 
      <div className="row"> 
       <h2 className="intro-name center-block">TEXT</h2> 
      </div> 
     </div> 
    ) 
} 

そして、私のcss中:

.intro-body { 
    height: 500px; 
    background-color: #3BC5C3; 
} 

「私はそれがブートストラップのデフォルト値としなければならなかった考え、margin: 0padding: 0bodyを設定しようとしたが、それはdidnの仕事。私もコンテナを持っていないので、なぜまだパディングがありますか?

+0

what inrow class?ブーストラップを使用する –

+0

私はブートストラップを使用しています。 – patrickhuang94

+0

.rowクラスを削除し、 –

答えて

6

問題は「コンテナ」クラスです。ブートストラップでは、この「コンテナ流体」のスタイリングを適用して、全幅を取得します。

render() { 
    return (
     <div className="container-fluid intro-body"> 
      <div className="row "> 
       <h2 className="intro-name center-block">TEXT</h2> 
      </div> 
     </div> 
    ) 
} 
+0

次に、 '.intro-body'の親' div'にはパディングがないことを確認してください。 – Preetesh

+0

H2から中心ブロックを削除し、その行にテキストセンターを追加しました。これを試して、動作しているかどうかを確認してください。親の行が中央に設定されていないと、中央ブロックが困難になることがあります。センターブロックを出し入れしてみてください。センターブロックの背後にあるCSSは "0 auto"ですが、親が設定されていない場合、autoの計算に必要な情報が不足している可能性があります。 – gavgrif

+0

それを試してみてくださいが、私はその必要はないと思うあなたのCSSをチェックする - いくつかのスタイルの競合は、パディングを強制されますか? – gavgrif

関連する問題