4列のブートストラップグリッドシステム

ブートストラップグリッドを使用してサイトを作成しようとしています。そこに行があり、その中に次のような4列があります。4列のブートストラップグリッドシステム

<body> 

    <div class='container-fluid'> 

    <div class='row'> 

     <div class='col-xs-9'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

    </div> 
    </div> 
</body>

小さな画面幅では列が壊れないと予想しました。しかし、小さなデバイスでは、最後の列が改行されます。それが期待されているのか、何かが欠けていますか？

Plunkerリンク：https://plnkr.co/edit/e9PXa97nnQaBSqXVVbHh?p=preview

出典

2017-05-14 JmRag

あなたがここにブートストラップコラムパディングを扱っています。

注ブートストラップCSSのように述べている：

.col-xs-1 { 
    [ ... ] 
    padding-right: 15px; 
    padding-left: 15px 
}

そして、あなたもそう

border: 1px solid grey;

プロパティを追加して、あなたが何で、あなたのdivは常に(2 * 15 + 2 * 1) = 32pxの最小水平方向の寸法を持っていません。ブラウザのインスペクタで、divの実際の内部幅がある時点で0であることがわかります。

修正は、非常に明白です：あなたも、最後のピクセルを絞り出すことができますので、パディングを削除するかrowクラスが行うよう、負のマージンを追加して、あなたはborderoutlineと交換してください。

編集：アウトラインパーツは過労です。埋め込みを削除するだけでうまくいくはずです。

出典

2017-05-14 11:56:39

4列のブートストラップグリッドシステム

答えて

関連する問題