Bootstrap 4-容器类和圆角？

Question

我如何才能实现一个div，它有一个来自Bootstrap的容器类，但也有圆角？

<div class="container rounded">
  <div class="row">
     <div class="col">Approver:</div>
  </div>
</div>

当我使用上面的代码时，我的角仍然看起来是方形的，但是Bootstrap 4文档指出“圆形”类应该处理圆角？

Answer 1

根据documentation，bootstrap中的rounded类执行以下操作：

.rounded {
    border-radius:.25rem!important
}

您应该能够在容器上使用它。

但是，请记住，除非背景颜色与container的颜色不同(或者除非它的边框颜色不同)，否则它将不可见。

下面是一段代码：

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container rounded">
  This rounded container has no background color.
</div>

<hr />

<div class="container rounded bg-dark">
  This rounded container has a background color.
</div>

<hr />

<div class="container rounded" style="border:1px solid black">
  This rounded container has no background color, but it has a black border.
</div>

​

Answer 2

我来到这里，试图为图像网格添加圆角。对于任何做同样的事情的人：

<div class="img-rounded">

或

<img class="rounded" src="img.png">