Bootstrap Grille Responsive saut de ligne

Je suis actuellement en train de travailler avec bootstrap système de grille et a obtenu le problème suivant:

J'ai eu des composants de la pile à 4 colonnes lors de la > tablette.
et dans les 2 colonnes lors de la < tablette.
Certains composants sont avec des Liens et d'autres non.

        <div class="col-xs-6 col-md-3">
            <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
          <div class="iconname">Test1</div>
          <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
          <div class="align-left"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
        </div>

http://jsfiddle.net/0q346dde/

Cela fonctionne bien, mais entre 440 et 485px largeur, le lien avec: > ABCDE TEST1 PRODUITS obtient un saut de ligne car il n'y a pas d'espace, pas plus. Il se produit jusqu'à ce que le deuxième lien (dont l'étiquette a moins de caractères) > ABCDE TES PRODUITS prend une pause.

Maintenant, j'ai essayé de mettre des "white-space: nowrap;" sur les liens, mais il ne convient pas < 400px, car ils se superposent les uns aux autres.

Quelqu'un peut m'aider?

kyuu y cant u juste faire col-sm-12 après 485px largeur

OriginalL'auteur Fl0R1D3R | 2015-01-29

  1. 4

    Dans votre cas, si vous voyez la hauteur de la div au-dessus de test3 icône augmente à mesure que la taille de l'écran diminue de sorte que vous avez à fixe la hauteur de la div en fonction de vos besoins. Par exemple.

    Css:

    .test {
     height: 40px;
}

    HTML:

    <div class "row">
<div class="col-xs-6 col-md-3">
<p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
<div class="iconname">Test1</div>
<div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
<div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
</div>
<div class="col-xs-6 col-md-3">
<p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
<div class="iconname">Test2</div>
<div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
<div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
</div>
<div class="col-xs-6 col-md-3">
<p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
<div class="iconname">Test3</div>
<div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
<div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
</div>
<div class="col-xs-6 col-md-3">
<p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
<div class="iconname">Test4</div>
<div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
<div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
</div>
</div>
    salut, ici, j'ai le même problème comme caeleas réponse: sur les ordinateurs de bureau j'ai besoin d'avoir 4 colonnes côte à côte
    veuillez vérifier j'ai modifié ma réponse en fonction de vos besoins.
    suivez ce lien jsfiddle.net/h1rtbagp

    OriginalL'auteur J Prakash

  2. 4

    Parfois je changer la grille de blocs de flotter à inline-block pour éviter ce genre de problème, n'oubliez pas d'effacer toutes les withespace entre vos colonnes ou il va briser votre mise en page (http://css-tricks.com/fighting-the-space-between-inline-block-elements/).

    .row.inline-block > *{display: inline-block; float: none; vertical-align: top;}

    Alors vous pouvez simplement ajouter .inline-block classe à votre ligne

    Ici un violon: http://jsfiddle.net/0q346dde/2/

    OriginalL'auteur Dax

  3. 1

    Vous devez utiliser l'utilisation d'un conteneur div avec le row classe pour chaque ligne.
    De cette façon, vous vous assurez que les flotteurs sont en cours de déblaiement.

    De sorte que vous aurez:

    <div class="row">
<div class="col-xs-6 col-md-3"></div>
<div class="col-xs-6 col-md-3"></div>
</div>

    Voici une mise à jour du violon

    Salut Caelea, merci pour votre réponse, mais ce n'est pas ce que je voulais: j'ai besoin d'eux pour être sur une seule ligne lorsque sur pc de bureau, c'est pourquoi j'ai fait le col-md-3 sur les colonnes d'ajustement lors de la > 768px largeur.

    OriginalL'auteur Caelea