Question

我有这样的引导布局;

这是一个|COL_1 | COL_2 | COL_3 |------ | ------ |-------- |A |A1 | 1 |A |A2 | 3 |A |A3 | 2 |B |B1 | 2 |B |B2 | 1，包含8个A |A1,A3,A2 B |B2,B1 div。问题是，有太多的垂直空白，这是不希望的和丑陋的。（无论如何，水平的空白/边距是有意和无法通过自举设计来改变的）

如何使盒子以这样的方式浮动，在保持柱子的同时占用最少的垂直空间？（方框顺序无关紧要）

我尝试使用 Masonry ，但它没有很好地处理盒子的引导浮动，最终完全破坏了我的布局。

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

我只是想让这个布局更简洁，并使用它可用的所有空间......

Answer 1

如何使盒子以这样的方式漂浮，即最少量的盒子垂直空间被占用，同时保持列？（的顺序盒子没关系）

由于您使用的是Bootstrap，col-xx类将干扰bootstrap css中设置的样式。为了做你想做的事，为这个特定的用例和/或元素摆脱引导样式。休息继续使用引导样式。

您需要在此处使用CSS列。为了保持响应，请添加所有可能的媒体查询。

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

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

现在，您可以为子div定义自定义样式：

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

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

@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; }
}
...

完整代码段：

＆＃13;

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; 
    }
}

＆＃13;

<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>

＆＃13;

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

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

Answer 2

检查一下（只有CCS，但没有Bootstrap）：http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

Answer 3

尝试这样做： -

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:450px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:500px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:400px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
      </div>
    </div>

  </div>
</div>

</body>
</html>

使引导列占用最小的垂直空间

3 个答案: