时间戳

首页 > 解决方案 > 无法弄清楚如何使用 Bootstrap 获得 3x4 网格

html - 无法弄清楚如何使用 Bootstrap 获得 3x4 网格

问题描述

我正在尝试创建一个简单的平方项目网格来显示图像。我有 12 张图像需要显示，所以我考虑了 4 行和 3 个 cols 网格，但没有成功。我尝试搜索和观看教程，但对我没有任何帮助。我以前从未尝试过 Bootstrap。

这是我到目前为止所尝试的：

      <div class="container">
      <div class="row">
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

        <div class="w-100"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

        <div class="w-100"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

        <div class="w-100"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

      </div>
    </div>

  </div>

标签： htmlbootstrap-4

解决方案

你的例子在这里工作正常：

Codepen - 示例

也许您没有在头部添加引导样式表？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

推荐阅读