一応rails5とbootstrap4環境で動かしているのですが殆どbootstrapの質問です。
<main class="container"> <div class="row"> <div class='col-xs-3 col-md-3'> コンテンツ </div> <div class='col-xs-3 col-md-3'> コンテンツ2 </div> <div class='col-xs-3 col-md-3'> コンテンツ3 </div> <div class='col-xs-3 col-md-3'> コンテンツ4 </div> </div> </main>
以上のようなマークアップがあったとしたら普通のPC画面ではcol-md-3
が4つあるため
コンテンツ コンテンツ2 コンテンツ3 コンテンツ4
と、bootstrapの12カラム分割によりこのように横並びで表示されると思います。
同じくcol-xs-3
も4つあるのでスマホ画面でも同じように横並びで表示させたいのですが、何故かこのマークアップだと
コンテンツ
コンテンツ2
コンテンツ3
コンテンツ4
と縦に表示されてしまいます。
スマートフォン画面でも
コンテンツ コンテンツ2 コンテンツ3 コンテンツ4
と表示させたいのですがクラスの書き方が間違っているのでしょうか?
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー