Bootstrap Grid：垂直浮动列[重复]答案

【问题标题】：Bootstrap Grid: Floating columns vertically [duplicate]Bootstrap Grid：垂直浮动列[重复]
【发布时间】：2015-09-22 00:32:46
【问题描述】：

我正在为一个项目使用 Bootstrap 网格，我想知道是否可以使列垂直浮动。截至目前，我似乎无法找到一种使这成为可能的方法。我正在为 Boostrap 网格或使用另一个网格寻找一些自定义 css 的形式来解决这个问题。但是，我更喜欢仅使用 css 设置网格，而不使用 JavaScript。

示例中有一张图片和一个链接：

Example

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>Test</title>
    <style type="text/css">
    body {
        margin-top: 20px;
    }

    .container {
        padding: 0 10px;
    }

    @media (min-width: 768px) {
        .container {
            width: 768px;
        }
    }

    @media (min-width: 992px) {
        .container {
            width: 868px;
        }
    }

    .div1, .div2, .div3, .div4, .div5, .div6 {
        background-color: #999;
        border-radius: 6px;
        width: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        font: bold 28px 'Arial'; 
    }

    .div1 {
        height: 120px;
    }

    .div2 {
        height: 260px;
    }

    .div3 {
        height: 140px;
    } 

    .div4 {
        height: 180px;
    }

    .div5 {
        height: 200px;
    } 

    .div6 {
        height: 90px;
    }

    .row {
        background-color: #CCC;
        border-radius: 6px;
        padding: 5px;
        margin: 0;
    }

    [class*="col-"] {
        display: table;
        padding: 5px;
    }
    </style>
</head>
<body>

<div class="container">
    <h2><b>Using Bootstrap</b><br>Each DIV is 6 columns wide with a variable height.<br>They're inside the same row.</h2><br>
    <div class="row">
        <div class="col-xs-6">
            <div class="div1">DIV 1</div>
        </div>
        <div class="col-xs-6">
            <div class="div2">DIV 2</div>
        </div>
        <div class="col-xs-6">
            <div class="div3">DIV 3</div>
        </div>
        <div class="col-xs-6">
            <div class="div4">DIV 4</div>
        </div>
        <div class="col-xs-6">
            <div class="div5">DIV 5</div>
        </div>
        <div class="col-xs-6">
            <div class="div6">DIV 6</div>
        </div>
    </div>
</div>

</body>
</html>

【问题讨论】：

这是一个常见问题。 CSS 不能做到这一点（还）......即使是 flexbox。 CSS Columns 是一个选项，但它不会有您指定的顺序。

标签： css twitter-bootstrap grid flexbox

【解决方案1】：

你需要一个砖石布局来做到这一点。将 masonry 库与您的引导代码一起使用。您可以关注此sitepoint post 来执行此操作。

这里还是 github 上的 masonry template using bootstrap。

【讨论】：

是的，这也是我发现的问题的唯一解决方案。我希望用纯 css 解决它，但这可能是不可能的 :( 感谢模板链接，帮助很大！

【解决方案2】：

您正在寻找这样的东西吗？使用column-properties。

#wrapper{
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}
.box{
  width: 150px;
  height: 220px;
  background-color: #eee;
  border-bottom: 1px solid black;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

<div id="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：