Alignement des icônes bootstrap col-sm-6

A la fenêtre d'affichage des icônes col-sm-6, désalignez comme indiqué sur l'image en utilisant clearfix mais ne fonctionne pas. Le lien direct du site est 38.117.223.31/emrmus.aspAlignement des icônes bootstrap col-sm-6

<div class="container"> 
     <div class="row icons"> 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
       <img class="mt-10" src="emrmus/images/circle-h-1.png"> 
       <div class=" right-icons" >Patient <br> portal</div> 
      </div> 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
       <img class="mt-10" src="emrmus/images/circle-h-2.png"> 
       <div class=" right-icons" >e-Labs, <br> Online Payments</div> 
      </div> 

      <div class="col-md-2 col-sm-6" style="text-align: center"> 
       <img class="mt-10" src="emrmus/images/circle-h-3.png"> 
       <div class=" right-icons">Patient <br> Support</div> 
      </div> 

      <div class="col-md-2 col-sm-6" style="text-align: center"> 
       <img class="mt-10" src="emrmus/images/circle-h-4.png"> 
       <div class=" right-icons" >E-prescription</div> 
      </div> 

      <div class="col-md-2 col-sm-6" style="text-align: center"> 
       <img class="mt-10" src="emrmus/images/circle-h-5.png"> 
       <div class=" right-icons" >Document <br> Imaging</div> 
      </div> 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
       <img class="mt-10" src="emrmus/images/circle-h-6.png"> 
       <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div> 

      </div> 

     </div> 

    </div>

Source

2017-10-19 Mustafa Saleem

Avez-vous des styles CSS définis pour ces éléments? Parfois, l'ajout de paddings et de marges peut perturber le style par défaut du bootstrap. –

L'utilisation d'un clearfix fonctionne, au moins avec l'exemple que vous avez affichée:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
     <div class="row icons"> 
 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-1.png"> 
 
       <div class=" right-icons" >Patient <br> portal</div> 
 
      </div> 
 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-2.png"> 
 
       <div class=" right-icons" >e-Labs, <br> Online Payments</div> 
 
      </div> 
 

 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-3.png"> 
 
       <div class=" right-icons">Patient <br> Support</div> 
 
      </div> 
 

 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-4.png"> 
 
       <div class=" right-icons" >E-prescription</div> 
 
      </div> 
 
      
 
      <div class="clearfix visible-sm"></div> 
 

 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-5.png"> 
 
       <div class=" right-icons" >Document <br> Imaging</div> 
 
      </div> 
 
      <div class="col-md-2 col-sm-6" style="text-align: center"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-6.png"> 
 
       <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div> 
 

 
      </div> 
 

 
     </div> 
 

 
    </div>

Source

2017-10-19 16:45:51 ncardeli

Merci, cela a fonctionné, j'utilisais clearfix dans un mauvais sens –

pour résoudre le problème, ajoutez un clear:left; aux éléments impairs.

@media (max-width: 991px) { 
    .row.icons .col-sm-6:nth-child(odd) { 
     clear: left; 
    } 
}

Fondamentalement, ce qui se passe est ce que le float ne fonctionne pas lorsque le premier élément de la ligne est plus grand que le deuxième élément de la ligne.

Source

2017-10-19 16:44:21 Jonathan

Aparently, le problème est dans la hauteur de chaque col-sm-6, vous pouvez définir la hauteur directement dans les propriétés de style, ou vous faites une classe et configurez dans votre fichier css, si vous voyez, j'ajoute min-height: 170px; à chaque div avec la classe col-sm-6 et cela le corrige.

<div class="container"> 
 
     <div class="row icons"> 
 
      <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-1.png"> 
 
       <div class=" right-icons" >Patient <br> portal</div> 
 
      </div> 
 
      <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-2.png"> 
 
       <div class=" right-icons" >e-Labs, <br> Online Payments</div> 
 
      </div> 
 

 
      <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-3.png"> 
 
       <div class=" right-icons">Patient <br> Support</div> 
 
      </div> 
 

 
      <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-4.png"> 
 
       <div class=" right-icons" >E-prescription</div> 
 
      </div> 
 

 
      <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-5.png"> 
 
       <div class=" right-icons" >Document <br> Imaging</div> 
 
      </div> 
 
      <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;"> 
 
       <img class="mt-10" src="emrmus/images/circle-h-6.png"> 
 
       <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div> 
 

 
      </div> 
 

 
     </div> 
 

 
    </div>

Source

2017-10-19 17:09:25

Alignement des icônes bootstrap col-sm-6

Répondre

Questions connexes