サイズの異なる div に問題があります。中型および大型ディスプレイでは 3 列幅の div、小型デバイスでは 6 列幅の div を表示する行が必要です。
<div class="container">
<div class="row">
<div class="service col-sm-6 col-md-3">Lots of stuff</div>
<div class="service col-sm-6 col-md-3">Less stuff</div>
<div class="service col-sm-6 col-md-3">Whooa!</div>
<div class="service col-sm-6 col-md-3">More stuff</div>
</div>
</div>
中型および大型ディスプレイでは、次のようになります。
––––––––––––––––– ––––––––––––––––– –––––––––––––––– ––––––––––––––––
| Lots of stuff | | Less stuff | | Whooa! | | More stuff |
| | ––––––––––––––––– | | | |
| | –––––––––––––––– ––––––––––––––––
| |
–––––––––––––––––
これは素晴らしいことです。ただし、小さなディスプレイでは次のようになります。
––––––––––––––––– –––––––––––––––––
| Lots of stuff | | Less stuff |
| | –––––––––––––––––
| | ––––––––––––––––
| | | Whooa! |
––––––––––––––––– | |
––––––––––––––––
––––––––––––––––
| More stuff |
| |
––––––––––––––––
これは、私が心に描いているこの美しい絵とはかけ離れています。
––––––––––––––––– –––––––––––––––––
| Lots of stuff | | Less stuff |
| | –––––––––––––––––
| |
| |
–––––––––––––––––
––––––––––––––––– –––––––––––––––––
| Whooa! | | More stuff |
| | | |
––––––––––––––––– –––––––––––––––––
簡単な解決策は、これらの div に最小の高さを与えることですが、この場合、それは実際にはオプションではありません。
助けてください!
編集:フィドルを追加http://bootply.com/81952