Последний элемент в строке не выравнивается

Question

Я использую bootsrap 3 как мою структуру CSS для стилизации своего сайта.

<div class="row"> 

    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
      . 
      . 
      . 
</div> 

Идея заключается в том, чтобы добавить col-lg-4 DIV в одну строку, а col-lg-4 DIV будет автоматически переходить к следующей строке, когда она имеет превышать ширину строки.

В целом, он отлично работает. Однако последний col-lg-4 div первой строки неправильно выравнивается. Демо-адрес: http://imaboy.cn/blog/forums/

У вас есть идеи, почему это происходит?

Вот скриншот:

http://www.imaboy.cn/screenshot.jpg

Answer 1

очень легко. В первом столбце последней строки у вас есть элемент col-lg-4, который имеет дополнительную строку текста, делая его выше. Это приводит к прерыванию нормального поплавка столбцов. Смотрите изображения ниже:

, как вы можете видеть, что беж зона собирается столкнуться с колонной в левой. Смотрите изображение ниже для лучшего обзора вопроса:

Я добавил прозрачность, так что вы можете увидеть столкновение и как, что ракета колонки блокирует все поплавки.

Раствор

просто добавьте в ваш CSS:

.col-md-6.col-xs-6.col-sm-6.col-lg-4{min-height:70px; margin-top:20px; } 

Теперь вы убедитесь, что эти столбцы будут иметь соответствующую высоту, чтобы плавать с легкостью (отрегулировать эту высоту, если это необходимо). Кроме того, я добавил объявление margin-top в ваш CSS вместо встроенного, так как лучше всего использовать его в таблице стилей. Кроме того, следует рассмотреть вопрос о предоставлении этих столбцов имя, как Mycol, так что вы не рискуете повлиять на столбцы в любом месте вашего сайта, и вы можете ориентировать их так же легко, как

.myCol{min-height:70px; margin-top:20px; }