砖石不能使用不同宽度的bootstrap3列
砖石不能使用不同宽度的bootstrap3列
提问于 2015-09-03 02:35:49
对于相同宽度的列(3-3-3-3，4-4-4，6-6等)，砖石结构工作得很好。但不能使用不同宽度的列(8-4、9-3等)工作(布局中断)。
请看截图。我正在尝试实现这种http://prntscr.com/8bu4lr布局。
标记：
<div class="container">
<div class="masonry-container row">
<!-- ITEM -->
<div class="masonry-item col-xs-12 col-sm-8">
</div><!-- /.masonry-item -->
<!-- ITEM -->
<div class="masonry-item col-xs-12 col-sm-4 ">
</div><!-- /.masonry-item -->
<!-- ITEM -->
<div class="masonry-item col-xs-12 col-sm-4 ">
</div><!-- /.masonry-item -->
</div><!-- /.row -->
//init masonry
$('.masonry-container').masonry({
// options
columnWidth: '.masonry-item',
itemSelector: '.masonry-item',
}); 另一个人问到了同样的问题here
回答 1
Stack Overflow用户
发布于 2015-09-03 02:46:28
我在使用Bootstrap和Masonry时发现，Masonry似乎不喜欢Bootstrap的网格系统。我根本不能让他们的网格工作，所以我决定把它剥离到绝对的基础上，包括宽度。然后，即使使用不同大小的列，它也能很好地为我工作。
这是我在砖石建筑中使用的简化网格系统：
$breakpoints: (xs, sm, md, lg);
$calculation: '';
@each $breakpoint in $breakpoints {
@for $i from 1 through 12 {
$calculation: 0% + ($i * 100 / 12);
.masonry-#{$breakpoint}-#{$i} {
@if $breakpoint == 'xs' {
width: $calculation;
}
@else if $breakpoint == 'sm' {
@media screen and (min-width: 768px) {
width: $calculation;
}
}
@else if $breakpoint == 'md' {
@media screen and (min-width: 992px) {
width: $calculation;
}
}
@else if $breakpoint == 'lg' {
@media screen and (min-width: 1200px) {
width: $calculation;
}
}
}
}
}但是，如果你不使用sass，你可以很容易地使用这个在线转换器来立即获得输出的CSS：
http://sassmeister.com/
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32360718
复制相关文章
相似问题
腾讯云开发者
