Настройте Bootstrap & quot; row & quot; чтобы соответствовать разному количеству столбцов «col-xs-12 col-sm-4 col-md-3»?
Вставка сообщений на страницу с помощью WP Loop. Попытка создать макет сетки с использованием столбцов Bootstrap класса «col-md-3», например.
Мне удалось найти полезный код, но в нем не хватает одной части того, чего я пытаюсь достичь.
По сути, когда вы используете WP Loop для извлечения и отображения сообщений на странице, вы можете поместить столбец Bootstrap класса «col-md-43» для каждого сообщения. Таким образом, каждое сообщение находится в столбце, и вы в основном создаете сетку сообщений. Выглядит отлично, за исключением того, что каждый ряд имеет разную высоту, и тогда у вас есть странные промежутки / пробелы.
Итак, есть много решений, и мне понравилось то, что предложил Zarko Jovic. https://stackoverflow.com/a/35963572/2243165
В основном решение состоит в том, чтобы поместить столбцы в класс «row». Задача решена.
Это работает, за исключением того, что я не знаю, как это сделать, если у меня есть разные столбцы в зависимости от размера экрана. Например я использую «col-xs-12 col-sm-4 col-md-3». Понятия не имею, возможно ли создать строку, которая подстраивается под каждый из 3 разных размеров / классов столбцов. Код в ссылке написан для использования 4 столбцов подряд. Но при использовании класса «col-xs-12 col-sm-4 col-md-3» строка иногда имеет 1 столбец, иногда 3, а иногда 4 столбца в строке 🙁
Вот мой код пока без размещения класса «row».
<?php
// Force loop to display defined custom post type
$args2 = array(
'post_type' => 'i',
'author' => get_queried_object_id(), 'showposts' => 100
);
$editors_pages = new WP_Query($args2);
// The loop
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?>
<div class='col-xs-12 col-sm-4 col-md-3'>
<div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div>
</div>
<?php endwhile; else : ?>
<p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;
wp_reset_postdata();
?>
Решение
Хороший способ решить эту проблему — задать минимальную высоту для ваших столбцов. Это Вам может понадобиться медиа-запрос для каждого размера, то есть xs, md.
// The loop
<div class="row"> // put a div
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?>
<div class='special-min-height col-xs-12 col-sm-4 col-md-3'> // add a class to reference too.
<div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div>
</div>
<?php endwhile; else : ?>
<p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;
</div>
CSS
.row .special-min-height {
min-height: 200px;
}
Затем вы можете написать медиа-запрос для оставшихся экранов с различной минимальной высотой.
Другие решения
используйте следующее свойство css для решения проблемы.
height: 100px;
overflow:auto;
таким образом, все ваши ящики будут иметь одинаковую высоту, и если содержание больше, то данная высота автоматически добавит прокрутку и настроит в ней ваш контент.