Bootstrap 3 - 2 rangées l'une à côté de l'autre

J'ai eu un problème avec bootstrap 3. Je veux avoir 2 rangées l'une à côté de l'autre quand il s'agit de grands écrans. J'ai utilisé 2 lignes parce que quand il s'agit de petits écrans, ils doivent être l'un en dessous de l'autre. Quand il s'agit de mobile, ils doivent être avec seulement 1 ligne. Mais ce n'est pas vraiment important pour ma question.Bootstrap 3 - 2 rangées l'une à côté de l'autre

So this picture shows how it looks vs how it is supposed to look.

<div class="icons"> <!-- icons --> 
     <div class="row"><!-- row --> 

      <!--Begin van 1e rij--> 
       <div class="row"> <!-- row1 --> 
        <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;"> 
         <img src="img/pakketten_images/Pakket_kar.png"> <br> 
         <span class="span3-1">Onlineshop</span> 
        </div> 

        <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
         <img src="img/pakketten_images/Pakket_card.png"> <br> 
         <span class="span3">Met betaalfuncties</span> 
        </div> 

        <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
         <img src="img/pakketten_images/Pakket_chat.png"> <br> 
         <span class="span3">Online klantcontact</span> 
        </div> 
       </div> <!-- /row1 --> 

      <!--Begin van 2e rij--> 
       <div class="row"> <!-- row2 --> 
        <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;"> 
         <img src="img/pakketten_images/Pakket_koppel.png"> <br> 
         <span class="span3">Webshop koppelen</span> 
        </div> 

        <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
         <img src="img/pakketten_images/Pakket_search.png"> <br> 
         <span class="span3">Verhoogt vindbaarheid</span> 
        </div> 

        <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
         <img src="img/pakketten_images/Pakket_marketing.png"> <br> 
         <span class="span3">Internet marketing</span> 
        </div> 
       </div> <!-- /row2 --> 

      </div> <!-- row --> 
     </div> <!-- /icons -->

Source

2017-09-12 Nick van Bruggen

Utilisez'cols' au lieu de 'rows' et utilisez les classes' col-xs-X' et 'col-md-X' correspondantes – Dekel

une classe row le fera. Il se séparera en 2 lignes différentes d'où le nom ** row ** une meilleure approche serait d'avoir tout le contenu dans 1 ligne et d'utiliser col-sm-12 parent div avec le contenu enveloppé à l'intérieur comme col-sm-3 – Andrei

Donc je supprimez simplement les classes 'row' et remplacez' col-xs-0' par 'col-xs-X'? –

Vous n'avez pas besoin d'avoir plusieurs lignes, vous pouvez les combiner et envelopperez automatiquement pendant que vous remplissez l'espace. Votre balisage est très proche - Si je comprends bien ce que vous essayez d'atteindre, vous devriez être en mesure de supprimer uniquement les lignes intérieures et de laisser le reste de votre balisage inchangé:

<div class="icons"> <!-- icons --> 
     <div class="row"><!-- row --> 

      <!--Begin van 1e rij--> 
      <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;"> 
       <img src="img/pakketten_images/Pakket_kar.png"> <br> 
       <span class="span3-1">Onlineshop</span> 
      </div> 

      <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
       <img src="img/pakketten_images/Pakket_card.png"> <br> 
       <span class="span3">Met betaalfuncties</span> 
      </div> 

      <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
       <img src="img/pakketten_images/Pakket_chat.png"> <br> 
       <span class="span3">Online klantcontact</span> 
      </div> 

    <!--Begin van 2e rij--> 
      <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;"> 
       <img src="img/pakketten_images/Pakket_koppel.png"> <br> 
       <span class="span3">Webshop koppelen</span> 
      </div> 

      <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
       <img src="img/pakketten_images/Pakket_search.png"> <br> 
       <span class="span3">Verhoogt vindbaarheid</span> 
      </div> 

      <div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;"> 
       <img src="img/pakketten_images/Pakket_marketing.png"> <br> 
       <span class="span3">Internet marketing</span> 
      </div> 
      </div> <!-- row --> 
     </div> 
</div>

See codepen: https://codepen.io/kball/pen/VMwMyo?editors=1010

Source

2017-09-12 22:30:55 kball

Bootstrap 3 - 2 rangées l'une à côté de l'autre

Répondre

Questions connexes