Question

如何实现一个具有Bootstrap容器类但也有圆角的div？

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

当我使用上面的代码时，我的角落看起来仍然是正方形，但Bootstrap 4文档指出＆＃34;舍入＆＃34;班级应该照顾圆角？

Answer 1

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

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

您应该可以在容器上使用它。

但是，请记住，除非背景颜色与container（或除非颜色边框不同）的颜色不同，否则它不会可见。

这是一个片段：

＆＃13;

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

＆＃13;

Answer 2

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

<div class="img-rounded">

或

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

Bootstrap 4 - 容器类和圆角？

2 个答案: