Bootstrap 3和不同的网格布局

Question

我是一个超级超级棒，需要你的帮助 我想要实现的是布局在列中有点灵活但仍然在行中，如下图所示，有3行，每行都有不同的颜色。我尝试了3行和1行，但没有什么区别 好的，所以我有9列，每列有4个空格。我试图将绿色中间的图片移动到粉红色的中间列。没有工作，我的意思是，但其他图片搞砸了。我也试过.clearfix 希望你能帮助伙伴，欢呼！

Answer 1

Bootrstap有不同的类来实现这一目标。

首先，

<div class="row">

和

<div class="col">

行类定义行，col类定义列。 您可以通过col-1，col-2，col-3作为示例指定列，一直到col-12。如果您没有定义col大小，它将自动填充尽可能多的空间，大小为col-12的大小。

还有大量嵌套类可以改变行为，例如元素中的文本放置等。

此行和列系统也完全响应。

了解更多here。

如果使用bootstrap行和列不能达到预期的效果， 尝试使用flexbox。更多信息here。

Answer 2

您要实现的目标称为“砌体布局”。

您无法按rows分发布局，必须使用columns进行布局。

所有内容都应位于.row div中，并且包含您需要的列数（在您的图片中，您需要使用.col-md-4）。

然后你应该使用Javascript或你正在使用的技术动态地将所有内容添加到这三列中（你也可以在PHP等上实现它，如果你需要帮助，我将编辑它）。

另外，我建议您使用Bootstrap 4，因为它包含一个名为Cards Columns的新功能，专为您要实现的目标而设计：

https://v4-alpha.getbootstrap.com/components/card/#card-columns

Answer 3

你可以使用导航栏作为上部位置，但是bootstrap不提供类来将列分成行，而是提供将行分成列。你必须在这里使用html css和jquery。