Bootstrap col的组织不是很好

Question

亲爱的聪明人，

我希望你能帮我解决Bootstrap中一个简单的问题。见附件网站：

http://www.marciplan.com/prt-2/

为什么这些文章（空白页面）不能很好地适应彼此？我希望它们看起来像这样1 我希望有人愿意付出努力来帮助这个假人。谢谢你们：）

亲切的问候， Marciplan

Answer 1

那是因为第二篇文章的高度大于顶行的其他两篇文章。解决这个问题的方法为每篇文章设置了一个固定的高度（比如400px就是最合适的）。

但在较小的设备上，您可能需要使用媒体查询来调整高度。

修改 尝试使用像网格一样的pinterest Masonry

Answer 2

首先需要向<div id="content">添加一个clearfix类，因为它的浮动子级正在折叠它的高度：<div id="content" class="clearfix">。

尝试将以下内容添加到#content CSS选择器：

#content {
   display: flex;
}

这似乎解决了我。我会将其包装在媒体查询中，以便在较小的设备上调整浏览器大小或查看浏览器时的正常堆叠行为不会受到影响：

@media (min-width: 768px) {
    #content {
       display: flex;
    }
}

修改

除了你的评论之外，你还应该将flex-wrap: wrap;属性添加到包装<div id="content" class="clearfix"> ...默认情况下，flexbox会尝试让孩子在同一行上：

@media (min-width: 768px) {
    #content {
        display: flex;
        flex-wrap: wrap;
        }
    }