Bootstrap 3 ligne des pauses sur les appareils moyens

J'ai un problème avec la taille différente de la vrd. J'aimerais avoir et ligne qui affiche la colonne 3 de large divs sur support & de grands écrans et de 6 colonnes de large divs sur de petits appareils.

<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>

sur support & grande affiche, cela ressemble à:

–––––––––––––––––   –––––––––––––––––   ––––––––––––––––   ––––––––––––––––
| Lots of stuff |   |   Less stuff  |   |   Whooa!     |   |  More stuff  |
|               |   –––––––––––––––––   |              |   |              |
|               |                       ––––––––––––––––   ––––––––––––––––
|               |
–––––––––––––––––

qui est tout simplement génial. mais sur de petits écrans, il ressemble:

–––––––––––––––––   ––––––––––––––––– 
| Lots of stuff |   |   Less stuff  |
|               |   ––––––––––––––––– 
|               |   ––––––––––––––––
|               |   |    Whooa!    |
–––––––––––––––––   |              |
                    ––––––––––––––––                       
––––––––––––––––
|  More stuff  |
|              |
––––––––––––––––

qui est assez loin de cette jolie image que j'ai dans mon esprit:

–––––––––––––––––   ––––––––––––––––– 
| Lots of stuff |   |   Less stuff  |
|               |   ––––––––––––––––– 
|               |
|               |
–––––––––––––––––
–––––––––––––––––   ––––––––––––––––– 
|    Whooa!     |   |  More stuff   |
|               |   |               |
–––––––––––––––––   –––––––––––––––––

Solution facile serait de donner à ces divs une hauteur minimale mais qui n'est pas vraiment une option dans ce cas.

S'il vous plaît aider!

edit: ajouté le violon http://bootply.com/81952

Vous pouvez emballage ces paires divs séparément. Je pense que cela va résoudre votre problème.
Pouvez-vous expliquer pourquoi min-height n'est pas une option? Je pense que c'est votre seul choix: bootply.com/81954
pour rendre le site client,-la preuve. le client sera en éditant des textes fortement au fil du temps et de la fixation d'un min-height n'est pas d'aller travailler.
Oh man, je ne voudrais pas être à votre place. J'ai eu ce problème avant et je pense qu'il pourrait même ne pas être possible. Suivez ce lien: matthewjamestaylor.com/blog/... vous ne savez Pas si c'est compatible avec Bootstrap. Pourquoi il est si dur de faire des divs utiliser 100% de l'espace vertical disponible est au delà de moi, vraiment.

OriginalL'auteur user2795613 | 2013-09-19

  1. 14

    Le Bootstrap 3 voies est comme suit:

    Entre le deuxième et le troisième div, ajouter le bit suivant de HTML:

    <div class="clearfix visible-sm"></div>

    Voir exemple ici: http://bootply.com/81970.

    Documation ici: http://getbootstrap.com/css/#grid-responsive-resets

    Merci!!!! cela a bien fonctionné.
    Merci beaucoup! Fonctionne parfaitement pour moi.

    OriginalL'auteur Sean Ryan

  2. 1

    Vous pouvez essayer d'habillage ceux paire divs séparément. un peu comme ce

    <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>
    hmm.. ne semble pas faire l'affaire. bootply.com/81955
    en fait, en les plaçant sur une paire de divs, bootstrap style, a fait le tour. bootply.com/81967 merci à vous!

    OriginalL'auteur Praveen