Question

我正在尝试创建一个简单的正方形项目网格以显示图像。我需要显示12张图像，因此我想到了4行3列网格，但没有成功。我尝试搜索和观看教程，但对我没有任何帮助。我以前从未尝试过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>

Answer 1

您的示例在这里工作正常：

Codepen - example

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

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

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

1 个答案: