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>
元素
所以圖像,數學是正確的在這裏,310px次3等於930px,但這裏的問題是,每個第二個「像素」調整我的瀏覽器,每個元素的寬度等於309.984px。
實時預覽:http://rbmedia.se/gfx/avesina/
我希望我自己清楚,在此先感謝!
請提供完整的CSS。我們不知道可能相沖突的其他元素的價值。 – Aibrean 2014-09-02 14:50:10
爲這些元素添加了CSS,但沒有周圍的元素,這些是行內唯一的元素。否則,您可以通過http:// rbmedia進行檢查。se/gfx/avesina/ – Svenskunganka 2014-09-02 14:53:39