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 Inline-Grid

1 个答案: