グリッドシステムでxsの指定

Question

col-xs-6と指定しているのに、どうして一つのカラムが横幅一杯に表示されてしまうのでしょうか？
また画面がxsのサイズになった時にでも、カラムのサイズを指定する方法を教えて欲しいです。

※バージョンは4.2.1です。

<div class="container">
	<div class="row">
		<div class="col-xs-6 col-sm-4 bg-primary">あ</div>
		<div class="col-xs-6 col-sm-4 bg-danger">あ</div>

	</div>
</div>

実行結果

Comments

[s8_chu]

Bootstrap のバージョンを教えていただけませんか？

[usui_orange]

失礼しました。4.2.1です...！

Answer 1

Bootstrap 4 から、.col-xs-*は.col-*というクラス名に変更されました。また、適用されるブレイクポイントも Bootstrap 3 から変更されています(参考)。そのため、 Bootstrap 4 で Bootstrap 3 と同様の効果を得るためには、 HTML, CSS を以下のように記述する必要があります(動作確認用リンク: Bootstrap 4 版, Bootstrap 3 版)。

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-6 col-md-4 bg-primary">あ</div>
    <div class="col-6 col-sm-6 col-md-4 bg-danger">あ</div>
  </div>
</div>

@media (max-width: 767px) {
  .container {
    max-width: 100%;
  }
}

Comments

[usui_orange]

bootstrap4に移行してから色々と変更点があったんですね。知りませんでした。回答ありがとうございました。感謝です！！