質問: スマホでwebを表示させた場合、横に画像を四分割均等表示させたいです。以下のように設定したいです。 home.png message.png game.png community.png という4つの画像を均等にスマホ4分割させたいです。例えばiphone5でもiphone6でも メニュー(ホーム、メッセージ、ゲーム、コミュニティ)4分割させたいです。 現在できたこと:テキストが表示されたが縦に表示されてしまう ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d99d60e58cebddc4abf464d0b3d61b3b.png) やりたいイメージ:テキストと画像が表示され、縦ではなく横に表示されている。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7fa27938dc8e9314746f6b555f30a119.png) また4分割にすると縮尺で画像や文字がずれてしまいます。そこで文字はテキストを設定し スマホになった時に縦にメニューを四分割ではなく横に均等に四分割に表示させるためにはどのように設定すれば良いでしょうか? PCの表示の時は以下のように10px均等にマージンをいれたいです。 PC表示 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/2712629589860df7768ffd94ead74f8a.png)
回答: col-3で<576px以下のレスポンシブクラスを付与すればできます。 Bootstrap公式 ・https://getbootstrap.com/docs/4.0/layout/grid/ ``` col-lg-3 col-lg-3 col-lg-3 col-lg-3 ```