Загрузочная сетка 3 элемента, каждая из которых занимает 33%

Question

У меня проблема с системой сетки Bootstrap. Я получил три столбца, каждый из них - XX-4 и каждый второй пиксель, который я обрабатываю в окне с тремя элементами, набирает часть пикселя меньше, чем 100% доступная ширина (в этом случае 930 пикселей). Причина, по которой это вызывает беспокойство, состоит в том, что вышеупомянутый элемент представляет собой карусель Bootstrap, 100% ширину, которая работает безупречно, всегда остается 930 пикселей.

Вот что я имею в виду (я увеличенной совсем немного):

Вот такой масштаб изображения картинка:

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

Это изображение Dev консоли в Chrome для <div class="col-xx-4></div> элементов

Таким образом, математика является правильным здесь, 310px раз 3 равна 930px, но вопрос здесь что каждый второй «пиксель» изменяет размер моего браузера, ширина каждого элемента равна 309.984px.

Live Preview: http://rbmedia.se/gfx/avesina/

Я надеюсь, что я сделал себе ясно, спасибо заранее!

Answer 1

Это связано с подпиксельным размером. Существует много дискуссий по этой теме.

• http://ejohn.org/blog/sub-pixel-problems-in-css/
• http://blogs.msdn.com/b/ie/archive/2012/02/17/sub-pixel-rendering-and-the-css-object-model.aspx
• http://maxlapides.com/fixing-subpixel-layout-rendering-in-safari/

Если вы хотите быть более подавленным, смотреть на него в Safari. Он переводит 309.984px в 309px (он просто уменьшает десятичную), поэтому ваша строка на самом деле 3px слишком узкая, а не только 1.

Другими словами, это проблема, зависящая от браузера.

Проще всего сделать в вашем случае просто установить background-color на .row, который будет окрашивать оставшиеся пары пикселей справа.

HTML (добавить класс к ряду)

<div class="row puffs"> 

CSS (цвет строки, чтобы соответствовать последним из 3 col с)

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