Harmoniser groupes de listes de hauteur variée horizontalement (Bootstrap 3)

Je suis en train d'aligner horizontalement mes groupes de liste, qui agissent actuellement comme ceci:Harmoniser groupes de listes de hauteur variée horizontalement (Bootstrap 3)

http://i.imgur.com/OPTebN3.png

Ce que je veux pour les groupes de la liste pour afficher sur la ligne suivante, directement en dessous du groupe de liste ci-dessus avec la plus grande hauteur.

Ils sont tous placés sur la même rangée, avec 6 colonnes chacun. Mon code ressemble à ceci:

        <div class="col-sm-6"> 
            <div class="list-group"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Soveværelser</h4> 
              <ul class="ul-with-bullets"> 
               <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
               <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
              </ul> 
             </div> 
            </div> 
           </div> 
           <div class="col-sm-6"> 
            <div class="list-group"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Toiletter</h4> 
              <ul class="ul-with-bullets"> 
                <li>Nr 1: WC. Varmt og koldt vand</li> 
               </ul> 
             </div> 
            </div> 
           </div>

Je voudrais éviter de créer une nouvelle ligne pour chaque groupe 2 de la liste, comme je l'ai besoin de cette mise en œuvre dans un système CMS. Y a-t-il une façon plus intelligente de mettre en place une grille? Avoir les groupes de liste alignés les uns sur les autres, tout en éliminant les espaces blancs pourrait également fonctionner, mais je ne suis pas si c'est possible.

Modifier: modifications de code ajoutées.

<div class="row"> 
           <div class="col-sm-12"> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Soveværelser</h4> 
              <ul class="ul-with-bullets"> 
               <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
               <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
              </ul> 
             </div> 
            </div> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Toiletter</h4> 
              <ul class="ul-with-bullets"> 
                <li>Nr 1: WC. Varmt og koldt vand</li> 
               </ul> 
             </div> 
            </div> 
           </div> 
           <div class="col-sm-12"> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Andre faciliteter</h4> 
              <ul class="ul-with-bullets"> 
                <li>Køkken: varmt og koldt vand</li> 
                <li>Gas/elkomfur</li> 
                <li>Opvaskemaskine</li> 
               </ul> 
             </div> 
            </div> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Udenfor</h4> 
              <ul class="ul-with-bullets"> 
                <li>Terrasse el. lignende</li> 
                <li>P-plads på grunden: 3</li> 
                <li>Havemøbler</li> 
                <li>Grill</li> 
               </ul> 
             </div> 
            </div> 
           </div> 
         </div>

Source

2017-08-23 Leth

salut vous pouvez essayer css FlexBox ici

CSS

.row.flex-row{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} 
    .row.flex-row > div{margin-bottom: 15px;} 
    .row.flex-row .list-group{margin-bottom: 0;} 
    .row.flex-row .list-group,.row.flex-row .list-group .list-group-item{height: 100%;}

HTML

<div class="row flex-row"> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Soveværelser</h4> 
       <ul class="ul-with-bullets"> 
        <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
        <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
        </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 


        </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
        </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
        </ul> 
      </div> 
     </div> 
    </div> 
</div>

Source

2017-08-23 08:13:09

fonctionne parfaitement! Je ne suis pas familier avec CSS Flexbox, mais je vais m'y pencher. Si je comprends bien, chaque groupe de liste sur chaque ligne va étirer sa hauteur pour correspondre à la hauteur la plus élevée sur cette ligne. Ma mise en page ressemble à ceci: http://i.imgur.com/KjXH4WW.png – Leth

La façon dont je pense que cela pourrait se faire est comme ceci: i changé col-sm-6-col-sm-12, puis j'ajouté col-sm-6 au list-group

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-sm-12"> 
 
    <div class="list-group col-sm-6"> 
 
    <div class="list-group-item"> 
 
     <h4 class="list-group-item-heading">Soveværelser</h4> 
 
     <ul class="ul-with-bullets"> 
 
     <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
 
     <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-sm-12"> 
 
    <div class="list-group col-sm-6"> 
 
    <div class="list-group-item"> 
 
     <h4 class="list-group-item-heading">Toiletter</h4> 
 
     <ul class="ul-with-bullets"> 
 
     <li>Nr 1: WC. Varmt og koldt vand</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-08-23 07:58:04

J'ai essayé de faire les changements, mais maintenant ma mise en page ressemble à ceci : http://i.imgur.com/R3ZTlrQ.png – Leth

J'ai apporté quelques modifications à votre code, ce qui renvoie l'apparence souhaitée, mais sera difficile à implémenter dans un système CMS. Voir éditer. – Leth

n'est-ce pas ce que vous vouliez? –

Je suis pas exactement sûr si c'est ce que vous cherchez, mais vous pourriez le faire avec des tables?

<table> 
    <thead> 
     <tr> 
     <th></th> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody> 
    <td> 

     <div class="list-group"> 
      <div class="list-group-item"> 
      <h4 class="list-group-item-heading">Soveværelser</h4> 
      <ul class="ul-with-bullets"> 
       <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
       <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
      </ul> 
      </div> 

     </div> 
     </td> 
     <td> 

     <div class="list-group"> 
      <div class="list-group-item"> 
      <h4 class="list-group-item-heading">Toiletter</h4> 
      <ul class="ul-with-bullets"> 
       <li>Nr 1: WC. Varmt og koldt vand</li> 
      </ul> 
      </div> 
     </div> 

     </td> 
    </tbody> 

</table>

Source

2017-08-23 08:07:48 toffler

Harmoniser groupes de listes de hauteur variée horizontalement (Bootstrap 3)

Répondre

Questions connexes