html - 如何避免 Angular 列中 div 之间的上下空格

Question

可能是我遗漏了一些东西..我正在遵循 bootstrap 的 Off Canvas 模板，我想知道我能否以正确的方式堆叠元素/卡片..我的意思是当它上下没有空格时他们的内容参差不齐。

检查此图像以了解我的意思。我认为 col-x 可以解决此问题。但事实并非如此如果我对我的问题不清楚，请告诉我。

这是示例代码:

  <div class="row">
    <div class="col-6 col-sm-6 col-lg-4">
      ......
    </div><!--/span-->
    <div class="col-6 col-sm-6 col-lg-4">
      .....
    </div><!--/span-->

添加我所说的示例:http://www.bootply.com/121097

谢谢!

Answer 1

您是否正在尝试完成“pinterest”或“masonary”风格的布局？

如果是这样，这里有许多方法中的三种...

1.使用 masonary.js

http://masonry.desandro.com/

2。或者您可以编写自己的 js 函数。可以在这里找到一个非常好的资源(开始这种疯狂的人的回答，一个 pinterest 的前端开发人员): http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout

3。或者你可以用 css 来做到这一点，使用 css3 列。看看这里的例子(虽然这不能完全解决你的布局):

http://jsfiddle.net/jalbertbowdenii/7Chkz/

    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;