@mrzgt

Как убрать обтекаемость?

Не могу понять как сделать что бы блоки стали в два ряда ровно
zoom.leo-mebel.com.ua
<h3><?php echo $heading_title; ?></h3>
<div class="row" style="opacity: 1; display: block;margin-bottom: 0px;">
    <?php foreach ($categories as $category) { ?>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
		 
            <div class="product-thumb transition">
                <div class="image"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>" title="<?php echo $category['name']; ?>" class="img-responsive" /></a></div>
            </div>
		    <div class="namelink">
                    <h4><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></h4>
            </div> 
			<?php if ($child_visible) { ?>
			<?php if ($category['children']) { ?>
					<ul class="list-unstyled">
					  <div class="clearfix visible-xs"></div>
            <?php foreach ($category['children'] as $child) { ?>
		
			        <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
            <?php } ?>
				   <li><span><a href="<?php echo $category['href']; ?>"><?php echo $Seeall; ?></a></span></li>
              </ul>
				     <?php } ?>
			<?php } ?>		 
        </div>
    <?php } ?>
</div>
  • Вопрос задан
  • 231 просмотр
Пригласить эксперта
Ответы на вопрос 3
LittleFatNinja
@LittleFatNinja
горе девелопер, любитель лютой садомии
clear: both
Ответ написан
Комментировать
Можно задавать им одинаковую высоту, есть плагины вроде matchHeight.
При 4 элементах в строке можно использовать .col-lg-3:nth-child(4n+1){ clear:left; } ну и для других вариантов в медиа запросах указать аналогично.
Либо делать display:inline-block; vertical-align:top; вместо float:left;
Ответ написан
Комментировать
@mrzgt Автор вопроса
нашел в интернете такой фикс
/* Bootstrap Clearfix */

/* Tablet */
media (min-width:767px){

/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: none;
}
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: left;
}
}

/* Medium Desktop */
media (min-width:992px){

/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: none;
}
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: left;
}
}

/* Large Desktop */
media (min-width:1200px){

/* Column clear fix */
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1),
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: none;
}
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1){
clear: left;
}
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы