引導程序col-sm-6圖標對齊

在col-sm-6圖標的視口去除對齊，如圖片中所示使用clearfix嘗試但不工作的網站的實時鏈接是38.117.223.31/emrmus.asp引導程序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>

來源

2017-10-19 Mustafa Saleem

你有這些要素定義的任何CSS樣式？有時添加填充和邊距可能會導致引導程序的默認樣式。 –

使用clearfix做工作，至少與例如你貼：

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

來源

2017-10-19 16:45:51 ncardeli

感謝它的確奏效，我以錯誤的方式使用了clearfix –

爲了解決這個問題，添加一個clear:left;到奇數元素。

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

基本上正在發生的事情是這樣的，當行中的第一個元素是比排在第二元素更高的float不工作。

來源

2017-10-19 16:44:21 Jonathan

Aparently，問題是在每個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>

來源

2017-10-19 17:09:25

引導程序col-sm-6圖標對齊

回答

相關問題