Bootstrap grid 3個項目，每個佔用33％

Bootstrap的網格系統有問題。我得到了三列，每個col-XX-4和每隔一個像素使用這三個元素重新調整窗口的大小，使得像素比100％可用寬度（本例中爲930像素）小。這是令人不安的原因是因爲上述元素是一個Bootstrap旋轉木馬，100％寬度，完美工作，始終保持930px。Bootstrap grid 3個項目，每個佔用33％

這裏就是我的意思（我已經在相當多的縮放）：

這裏有一個縮小圖片：

我使用的HTML代碼爲：

<!-- Puffs Start --> 
<div class="row"> 
    <?php if (have_rows('puffs')): 
      $iterations = 0; 
      while(have_rows('puffs')): the_row(); 
      $iterations++; 
      $headline = get_sub_field('headline'); 
      $text = get_sub_field('text'); 
      $link = get_sub_field('link'); 
    ?> 
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
       <?php if($iterations == 2): ?> 
       <div class="puff second"> 
       <?php else: ?> 
       <div class="puff"> 
       <?php endif; ?> 
       <h3 class="puffHeadline"><?php echo $headline; ?></h3> 
       <p class="puffText"><?php echo $text; ?> </p> 
       <a href="<?php echo $link; ?>"> 
       <img class="puffArrow" src="<?php echo get_template_directory_uri() . '/assets/img/arrow.jpg'; ?>"> 
       </a> 
       </div> 
      </div> 
    <?php endwhile; ?> 
    <?php endif; ?> 
</div> 
<!-- Puffs End -->

而這就是CSS代碼：

.puff { 
    height:190px; 
    background:#85bf61; 
    padding:20px 20px 0 20px; 
} 

.puff.second { 
    background:#acd373; 
} 

.puffHeadline { 
    font-size:33px; 
    margin-bottom:10px; 
    font-weight:400; 
} 

.puffText { 
    font-size:18px; 
    font-weight:300; 
} 

.puffArrow { 
    background:url(../img/arrow.jpg); 
    position:absolute; 
    bottom:0; 
    right:0; 
}

這是Chrome的開發控制檯爲<div class="col-xx-4></div>元素

Chrome dev tools

所以圖像，數學是正確的在這裏，310px次3等於930px，但這裏的問題是，每個第二個「像素」調整我的瀏覽器，每個元素的寬度等於309.984px。

實時預覽：http://rbmedia.se/gfx/avesina/

我希望我自己清楚，在此先感謝！

來源

2014-09-02 Svenskunganka

請提供完整的CSS。我們不知道可能相沖突的其他元素的價值。 – Aibrean 2014-09-02 14:50:10

爲這些元素添加了CSS，但沒有周圍的元素，這些是行內唯一的元素。否則，您可以通過http：// rbmedia進行檢查。se/gfx/avesina/ – Svenskunganka 2014-09-02 14:53:39

這是由於子像素大小。關於這個話題有很多討論。

如果你想更鬱悶，看看它在Safari瀏覽器。它翻譯309.984px到309px（它只是下降小數），所以你的行實際上是3px太窄而不是1。

換句話說，這是一個瀏覽器特定的問題。

在你的情況下最簡單的做法是在.row上設置一個background-color，這將在右側着色剩餘的幾個像素。

HTML（類添加到該行）

<div class="row puffs">

CSS（顏色行相匹配的最後3個col S的）

.row.puffs { 
    background-color: #85bf61; 
}

來源

2014-09-02 15:10:11 CodingWithSpike

這工作！非常感謝！ – Svenskunganka 2014-09-02 15:21:12

Bootstrap grid 3個項目，每個佔用33％

回答

相關問題