bootstrap col不合適

當我在ipad橫向視圖上查看我的網站「服務」時，我的服務正在往下一排。我檢查了開發人員工具，並可以看到我是否解除引導程序33.3％，每項服務將獲得50％。bootstrap col不合適

但是我看不出如何讓每一個填充33.3％，當bootstrap定義它時。我還定義了div類應該使用多少個col。我瀏覽了我的CSS，並且沒有任何填充，頁邊空白等等，這會導致這種情況。

<!-- begin services section --> 
<section class="services"> 
    <div class="container"> 
     <div class="row"> 

      <div class="col-xs-12 col-sm-6 col-md-4"> 
       <div class="service small"> 
        <i class="fa fa-paper-plane-o"></i> 
        <h3>AutoPilotHQ</h3> 
        <p> 
         I startet to have quite some experience building quality leads through journeys and landingpages. I have made scripts that can be integrated with several platforms. 
        </p> 
       </div> 
      </div> 

      <div class="col-xs-12 col-sm-6 col-md-4"> 
       <div class="service small"> 
        <i class="fa fa-tablet"></i> 
        <h3>Mautic</h3> 
        <p> 
         I like the idea about open source marketing automation. I am currently working on different functions to generate and build more qulity leads. 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>

來源

2016-09-11 McDuck4

CSS可能會很棘手。

服務<i class="fa fa-paper-plane-o"></i>的圖標被設置爲float: left;並且它可以制動佈局。

添加此規則，以解決它：

.service.small:after { 
    content: " "; 
    clear: both; 
    display: table; 
}

禁用以下CSS規則還修復您的佈局（我不知道爲什麼）：

.services .service { 
    margin-bottom: 30px; 
}

來源

2016-09-11 18:26:51 pr0gramist

謝謝你很多關於你的答案。如果我刪除了float：left，那麼在ipad的縱向視圖中結果將是相同的。但是忽視了最低限度的工作。上帝知道爲什麼？感謝您的幫助：） – McDuck4

bootstrap col不合適

回答

相關問題