Bootstrap 3和不同的网格布局答案

【问题标题】：Bootstrap 3 and different grid layoutBootstrap 3和不同的网格布局
【发布时间】：2021-08-20 15:36:58
【问题描述】：

我是一个超级菜鸟，需要你的帮助。
我想要实现的是在列中布局有点灵活，但仍然在行中，如下图所示，有 3 行，每行颜色不同。我尝试了 3 行和 1 行，没有任何区别。
好的，所以我有 9 列，每列占用 4 个空格。我试图将中间的绿色行移动到粉红色的中间列。没有成功，我的意思是它成功了，但其他照片搞砸了。我也尝试了 .clearfix。
希望能帮到大家，加油！

【问题讨论】：

我将 CDN 用于 CSS JS JQuery

【解决方案1】：

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

您不能通过rows 分发您的布局，您必须使用columns。

所有内容都应该在.row div 中，并且具有您需要的列数（在您的图像情况下，您需要使用.col-md-4）。

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

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

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

【讨论】：

是的，我试过了，除了动态添加这些。因为如果它需要的不仅仅是 html css 和超基本的 js，我现在还不是很重要。我正在 Udemy 上进行网络训练营，它没有更新为使用 bootstrap 4，所以我想先使用它然后再移动。但无论如何，谢谢：D 我将使用与教程中相同大小的图片哈哈，干杯。
没问题。使用 Bootstrap 3 您可以实现相同的目的，但您必须使用 JQuery 在每一列上插入图像（如果您从外部加载它们）。如果它是静态的，那么使用列不会有任何问题。

【解决方案2】：

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

主要是，

<div class="row">

和

<div class="col">

row 类定义行，col 类定义列。您以 col-1、col-2、col-3 为例指定列，一直到 col-12。如果你没有定义 col 大小，它会自动填充尽可能多的空间，向上 col-12 的大小。

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

这种行列系统也是完全响应式的。

阅读更多here。

如果您无法通过使用引导行和列来获得所需的结果，尝试使用 flexbox 代替。更多信息here。

【讨论】：

我已经在使用这些了。

【解决方案3】：

您可以将导航栏用于上方位置，但引导程序不提供将列拆分为行的类，而是仅将行拆分为列。您必须在此处使用 html css 和 jquery。

【讨论】：

【解决方案4】：

您将无法将 top->bottom 时尚与 bootstrap 对齐。我能找到的唯一可以提供吸引人结果的方法是 DeSandro 的 masonry 库 (https://masonry.desandro.com/) 如果您仅限于 Bootstrap 3。如果您可以使用 Bootstrap 4 卡（卡列）可以提供一些功能，或者您也可以查看DeSandro 的同位素。

但还是使用上面提到的砌体插件：

<div class="container">
  <div class="my-card col-lg-4 col-md-4 col-sm-4">
    Content 1
  </div>
  <div class="my-card col-lg-4 col-md-4 col-sm-4">
    Content 2
  </div>
  <div class="my-card col-lg-4 col-md-4 col-sm-4">
    Content 3
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    Content 4
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    Content 5
  </div>
  <!-- ... -->
</div>

和 JavaScript：

$(document).ready(function() {
  var $container = $('.container');

  $container.masonry({
    itemSelector: '.my-card',
    columnWidth: '.my-card',
    transitionDuration: 0
  });
});

【讨论】：