Bootstrap 4 相当于 CSS 内联网格

Question

我有一个要在桌面网页上显示的项目列表。

<div class="departments">
@foreach (var department in Model)
{
<div>
    <img src="department_photo.png" />
    <div class="details">
        @Html.DisplayFor(modelItem => department.Description)
    </div>
</div>
}
</div>

我想让它显示在动态网格中，以便有 3 列自动环绕。所以如果我在列表中有四个项目，它看起来像

A B C
D

如果我有 11 件物品，它看起来会像

A B C
D E F
G H I
J K

在 .CSS 中，我可以这样做：

.departments {
    display: inline-grid;
    grid-template-columns: auto auto auto;
}

如何在 Bootstrap 4 中执行此操作？我想使用 bootstrap 来利用响应能力。我还没有找到一种不必自己分隔行的方法。

Answer 1

如果我错了请纠正我，但是 Bootstrap 的 grid 不是您所要求的完全可行吗？ Bootstrap 的布局可能是其使用最广泛的功能，我相信这是其受欢迎的主要原因之一。

注意： 完全忽略 CSS，只是在悬停时突出显示每个单元格。

.col-4 {
  transition: background-color .3s ease-out;
  padding: 15px;
  background-color: #f5f5f5;
}
.col-4:hover {
  background-color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-4">Item 1<br>second line</div>
    <div class="col-4">Item 2</div>
    <div class="col-4">Item 3</div>
    <div class="col-4">Item 4</div>
    <div class="col-4">Item 5<br>second line</div>
    <div class="col-4">Item 6</div>
    <div class="col-4">Item 7</div>
    <div class="col-4">Item 8</div>
    <div class="col-4">Item 9<br>second line</div>
    <div class="col-4">Item 10</div>
    <div class="col-4">Item 11</div>
    <div class="col-4">Item 12</div>
    <div class="col-4">Item 13<br>second line</div>
  </div>
</div>

Bootstrap 4 相当于 CSS 内联网格

Bootstrap 4 equivalent to CSS Inline-Grid

css

bootstrap-4

twitter-bootstrap-4