Question

我想用Bootstrap 4创建一个响应的方块网格，为此，我正在做这样的事情（一行）：

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

我正在设置col类以具有以下规则：

.col {
    padding-top: 100%;
}

但是只会在视口高度的每一列上创建一行。

此解决方案以前曾用过，但我认为它打破了Bootstrap 4 flexbox。

有什么想法吗？

Answer 1

padding-bottom: 100%

...应用等于父{†width的填充值。父宽度为.row s宽度。如果您有5个元素，则需要应用padding-bottom: 20%。如果他们是4，你需要padding-bottom: 25%等......

并且，请记住，如果您希望您的列以响应方式进行换行，则需要针对每种情况调整padding-bottom值。

更简单的方法是将方形物品放在col内。这样它们将始终是相对于当前列宽的正方形：

.square {
  padding-bottom: 100%;
}
.orange {background-color: orange;}
.orangered {background-color: orangered;}
.gold {background-color: gold;}
.darkorange {background-color: darkorange;}

<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">
    <div class="row no-gutters">
        <div class="col"><div class="square orange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
        <div class="col"><div class="square gold"></div></div>
        <div class="col"><div class="square darkorange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
    </div>
</div>

现在您可以安全地向列中添加响应类，相对于当前列宽，方块将保持正方形。

注意我还将no-gutters类添加到row以删除col左/右填充值。
如果您希望容器具有完整的页面宽度，请将container更改为container-fluid。

Answer 2

你能尝试使用class =＆＃34; w-100＆＃34;

Bootstrap官方网站上的示例

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Answer 3

您可以更好地使用自举功能，而不是自己实现。为什么要使用框架？

以下是bootstrap mt-x类的示例，它为不同的列添加了边距。

.col{
  background-color: powderblue;
  border: 1px solid black;
  height: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col mt-5" ></div>
        <div class="col mt-4"></div>
        <div class="col mt-3"></div>
        <div class="col mt-2"></div>
        <div class="col mt-1"></div>
    </div>
</div>

您可以使用Bootstrap4 mt（页边距顶级）

Bootstrap 4方格

3 个答案: