使引导列占用最小的垂直空间 [英] Make bootstrap columns take up the least vertical space

问题描述

我有一个像这样的引导布局;

I have a bootstrap layout like this;

它是一个单独的 .row ，包含8 .col-lg-3 div。问题是，有这么多垂直空格，这是不想要的和丑陋的。 （水平的空格/边距是打算的，并且无法通过引导设置改变）

It is a single .row, containing 8 .col-lg-3 divs. The problem is, that there is so much vertical whitespace which is undesired and ugly. (The horizontal whitespace/margin is intended and unchangeable by the bootstrap desing anyway)

如何使框浮动，使得最小的垂直空间被占用，同时保持列？ （框的顺序并不重要）

How can I make the boxes float in such a way, that the least amount of vertical space is occupied, while maintaining the columns? (Order of boxes does not matter)

我尝试使用 Masonry ，但它不能很好地处理框的引导浮动，完全破坏我的布局。

I tried using Masonry but it doesn't handle the bootstrap floating of boxes very well and just ended up completely destroying my layout.

这是否可能没有JavaScript？显然，还有其他行，其中的框有不同的高度，并且也不总是正好每行8个框。

Is this possible without JavaScript? Obviously, there are other rows in which the boxes have different heights, and there are also not always exactly 8 boxes per row.

我只想得到这个布局更简洁，使用所有可用空间...

I just want to get this layout to be more concise and use all the space it has available...

推荐答案

框浮动这样的方式，最小量的
垂直空间被占用，同时保持列？ （
盒的顺序并不重要）

How can I make the boxes float in such a way, that the least amount of vertical space is occupied, while maintaining the columns? (Order of boxes does not matter)

由于您使用Bootstrap， xx 类将干扰在引导css中设置的样式。为了做你想要的，为这个特定的用例和/或元素打破自举风格。 Rest将继续使用引导样式。

Since you are using Bootstrap, the col-xx classes will interfere with the styles set in the bootstrap css. In order to do what you want, break free from bootstrap styling for this particular use-case and/or element(s). Rest continue using bootstrap styles.

您将需要在此处使用CSS列。

You will need to use CSS columns here. And to keep it responsive, add all possible media queries.

您的标记保持不变，只需删除 col-x 类。这将导致引导样式不应用。

You markup remains same, just remove the col-x classes. This will cause bootstrap styles to not apply.

<div class="container-fluid">
    <div id="col" class="row">
        <div>Lorem Ipsum</div>
        ...
    </div>
</div>

现在为子 div s：

div#col > div { margin: 8px; padding: 6px; }
div#col > div:first-child { margin-top: 0px; } /* remove margin on first */

并且父容器的所有媒体查询允许自定义列计数，例如：

And all media queries for the parent container to allow custom column count, for example:

@media screen and (min-width:761px) {
    div#col { column-count: 4; column-gap: 0; padding: 8px; }
}
@media screen and (min-width:760px) {
    div#col { column-count: 3; column-gap: 0; padding: 8px; }
}
...

完成片段：

div#col > div {
    margin: 8px; padding: 6px; background-color: #efefef;
    -webkit-column-break-inside: avoid;
}
div#col > div:first-child { margin-top: 0px; }

@media screen and (min-width:761px) {
    div#col { 
        -webkit-column-count: 4; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 4; -moz-column-gap: 0; 
        column-count: 4; column-gap: 0; 
    }
}
@media screen and (max-width:760px) {
    div#col { 
        -webkit-column-count: 3; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 3; -moz-column-gap: 0; 
        column-count: 3; column-gap: 0; 
    }
}
@media screen and (max-width:480px) {
    div#col { 
        -webkit-column-count: 2; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 2; -moz-column-gap: 0; 
        column-count: 2; column-gap: 0; 
    }
}
@media screen and (max-width:360px) {
    div#col { 
        -webkit-column-count: 1; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 1; -moz-column-gap: 0; 
        column-count: 1; column-gap: 0; 
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div id="col" class="row">
        <div>Lorem Ipsum</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Lorem Ipsum</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
</div>

小提示： http://jsfiddle.net/abhitalks/ar29jfqt/2/

尝试将上述小提琴中的窗格调整为所有可能的大小，然后查看列是否重新排列。

Try resizing the pane in the above fiddle to all possible sizes and see if the columns rearrange themselves.

这篇关于使引导列占用最小的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！