ブートストラップcol-sm-6アイコンのアラインメント

Question

col-sm-6のアイコンは、clearfixを使用して試した写真のように整列しませんが、ウェブサイトのライブリンクは38.117.223.31/emrmus.asp

です

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

Answer 1

は、少なくともあなたが掲示例で仕事ん：

Aparently

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

Answer 2

は奇数要素に clear:left;を追加し、問題を解決するには。

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

基本的に起こっている行の最初の要素は行の2番目の要素よりも高いときfloatが動作していないことが、このあります。 clearfixを使用して

Answer 3

、問題は各COL-SM-6の高さであり、あなたが設定することができますスタイルのプロパティで直接高さ、またはクラスを作成してCSSファイルで設定すると、表示される場合は、各divにmin-height: 170px;をcol-sm-6クラスで追加して修正します。

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