4

サイズの異なる 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

4

2 に答える 2

1

divsこれらのペアを別々にラップしてみることができます。ややこのように

<div class="container">
<div class="row">
<div class="inner1"> -------------------------------------------
    <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>----------------------------------------------------------
<div class="inner2"> -------------------------------------------    
    <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>  
</div>
于 2013-09-19T13:47:57.710 に答える