Bootstrap 3 レスポンシブ グリッドを試していて、画面サイズが小さいときに行から列を消そうとしています。列を非表示にすることはできますが、結果として行全体が狭くなるようです。
これが私に悲しみを与えている私のコードです:
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-2 col-md-1" align="center">
Col1
</div>
<div class="col-xs-4 col-sm-2" align="center">
Col2
</div>
<div class="col-xs-12 hidden-xs col-sm-6 col-md-5" align="center">
Col3
</div>
<div class="col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3 " align="center">
Col4
</div>
<div class="col-xs-4 col-sm-2 col-md-1" align="center">
Col5
</div>
</div>
</div>
画面が小さくなると列 Col4 と次に Col3 が消えますが、削除するたびに行が狭くなります (変更されないヘッダー行の行と比較した場合)。プロセスの各段階ですべてのブロックの合計が 12 の幅になることを確認したので、その理由はわかりません。col-xs-12 が問題だったのかもしれませんが、これを削除すると、列がまったく削除されなくなり、削除された列が Col5 に挿入されます。
私は明らかに「何か」が欠けていますが、私を助けるものはどこにも見つかりません - 願わくばここで悟りを見つけてください。