#html #css #twitter-bootstrap
#css #twitter-bootstrap #масонство
Вопрос:
Моя проблема в том, что я хочу отображать данные в блочном формате, используя сеточную систему bootstrap 3, однако я не хочу, чтобы раздражающие пробелы, которые возникают из-за высоты, ограничиваемой приведенной выше строкой. Например, если я сделаю:
<div class="row">
<div class="col-lg-4">post</div>
<div class="col-lg-4">longer post that is going to take more height than the others</div>
<div class="col-lg-4">post</div>
</div>
<div class="row">
<div class="col-lg-4">post</div>
<div class="col-lg-4">post</div>
<div class="col-lg-4">post</div>
</div>
тогда у меня останутся пробелы между двумя строками, чего я пытаюсь добиться, так это эффекта масонства (где заполнение сообщения находится рядом с сообщением над ним) только с использованием CSS, в частности, bootstrap 3 grid system. То есть:
Я знаю, что это можно сделать с помощью плагинов, но я хочу посмотреть, есть ли более чистое (даже если оно должно быть хакерским) решение. Есть идеи?
Комментарии:
1. sickdesigner.com/masonry-css-getting-awesome-with-css3
2. Способ, который предлагает Aibrean, и ссылка выше помещают блоки в порядке столбцов, а не в порядке ящиков, а Masonry помещает их туда, где они подходят, и это не в порядке, но иногда близко.
3. @BootstrapBoogie-Christina Мне понравилась эта ссылка, однако на самом деле она не использует сеточную систему bootstrap 3, я собрал скрипку: jsfiddle.net/vtanz6xc/2 это, однако, работает и по-прежнему использует систему столбцов, я полагаю, что пока это должно сработать.
Ответ №1:
Мы сделали это на сайте, и то, что мы сделали, это разместили сетку в вертикальных рядах.
Пример:
<div class="row">
<div class="col-lg-4">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="col-lg-4">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="col-lg-4">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
Комментарии:
1. Что вы подразумеваете под «размещением сетки в вертикальных рядах». у bootstrap, похоже, нет класса box, просто запутанный taf
2. Это пример, не нужно воспринимать
boxбуквально. «Вертикальные строки» — это столбцы, за исключением того, что я не хотел, чтобы вы думали об использовании столбцов. То, как вы думаете это сделать, поперек, когда оно должно течь вниз и вверх. Вам обязательно нужно использовать Javascript для упорядочения. Мы настроили наш класс bootstrap grid на LI.3. Да, это верно 🙂 JS должен был бы сработать, чтобы упорядочить порядок. Каждое второе целое число помещается во второй столбец, каждое третье — в третий и т.д.
4. Хорошо, вот как я это сделаю сейчас, я сяду сегодня вечером и попытаюсь придумать лучшее решение для размещения столбцов в ряд, спасибо!
5. Звучит как хорошая идея. Как мне настроить JS для перераспределения блоков при изменении макета fluid? Мне нужно будет динамически помещать их в один из столбцов в зависимости от того, какой дисплей является xs, sm, md или lg.
Ответ №2:
В Bootstap .row элемент используется для очистки поплавков от div-блоков / col, которые он содержит (в вашем примере. col-lg-4 );
Таким образом, в принципе невозможно, чтобы элементы в разных строках стояли рядом друг с другом, вам обязательно нужно изменить разметку;
С другой стороны, использование адаптивной системы столбцов bootstrap может быть полезно для создания эффекта CSS-Masonry:
вы можете попробовать поместить все «col-items», на которые вы хотите создать эффект масонства, в одну строку, отображаемую как встроенный блок (плюс, возможно, некоторые другие небольшие настройки ..) должно сработать (это путь, если вы застряли только с CSS ..);
В заключение помните, что Masonry родилась и остается библиотекой компоновки сетки JavaScript, поэтому, даже если вы можете заставить ее работать с CSS, я предлагаю вам использовать JS.
тысяча благодарностей Десандро за эту потрясающую идею;
Ответ №3:
В Bootstrap 4 вы можете использовать .card-columns , смотрите Здесь: https://v4-alpha.getbootstrap.com/components/card /
Хотя я бы рекомендовал использовать isotope, поскольку JS обеспечивает больший контроль и лучшую совместимость, чем CSS.
Ответ №4:
я сделал простую сетку масонства, которая получает изображения из базы данных, используя только css, подобный этому :
<div class="container">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
<div class="image-gallerie">
<img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />
</div>
</a>
</div>
</div>
.container {
-moz-column-width: 35em;
-webkit-column-width: 35em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}
.image-gallerie {
width: 100%;
}
.image-gallerie img{
width: 100%;
height: 100%;
margin-top: 15px;
margin-bottom: 10px;
}
Ответ №5:
Если вы не можете использовать столбцы Bootstrap 4 card, вам понадобится какая-то библиотека JavaScript для компоновки масонства. У DeSandro есть библиотека с именем Isotope, или посмотрите эту масонство (https://masonry.desandro.com /) решение.
<div class="row my-container">
<div class="my-card col-lg-4">post</div>
<div class="my-card col-lg-4">longer post that is going to take more height than the others</div>
<div class="my-card col-lg-4">post</div>
<div class="my-card col-lg-4">post</div>
<div class="my-card col-lg-4">post</div>
<div class="my-card col-lg-4">post</div>
</div>
и JavaScript:
$(document).ready(function() {
var $container = $('.my-container');
$container.masonry({
itemSelector: '.my-card',
columnWidth: '.my-card',
transitionDuration: 0
});
});