2016-09-13 16 views
0
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12" style="background-color:red;"> 
       dfsasfssssssssssssssssssssssssssssssssssssssssssssss 
      </div> 
     </div> 
    </div> 
    </body> 

PLUNK to editブートストラップ柱が垂直

を拡大していないこれはおそらく非常に明白なものですが、私は、ブートストラップの列がコンテンツを縦に拡大思いました。私はしません。

ボーナスに関する質問:「コンテナ」をインデントするためのブートストラップのデフォルト動作ですか?これを避けるにはどうすればよいですか?

+1

CSSをリセットすることができます。ホワイトスペースを使用するようにしてください:正常; – Nimmi

+1

ボーナス回答:はい、ブートストラップのデフォルト動作です。左右に15pxのパディングが追加されています。これを避けるには、.container {padding-left:0;}を使用して独自のスタイルシートでCSSを上書きできます。 padding-right:0;} ' – asprin

答えて

3

col-*-*float:leftに設定されているため、ブートストラップの通常の動作であるため、テキストにスペースがないため、word-wrap:break-wordを使用する必要があります。

はあなたが言及した インデントを避けるために(デフォルトでは .containerに追加するブートストラップ padding)、あなたはセットで .container {padding:0}

.col-xs-12 { 
 
    background:red; /* demo */ 
 
    word-wrap: break-word 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     dfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssss 
 
    </div> 
 
    </div> 
 
</div>

+0

それは私の問題を解決する - 私は間隔の問題も考慮しなかったので、私は思考過ぎた。タイマーが切れると答えを受け入れるようになります。 – VSO

関連する問題