Html Bootstrap 4 img-circle 类不起作用

Bootstrap 4 img-circle class not working

提问by Cal Courtney

I'm writing a website in HTML5 and Bootstrap 4 and I'm trying to turn a square image into a circle. In Bootstrap 3 this was easily do-able with .img-circle, but now I can't seem to get it to work and I can't find any answers online. Has Bootstrap dropped the img-circle class or is my code messed up?

我正在用 HTML5 和 Bootstrap 4 编写一个网站，我正在尝试将一个方形图像变成一个圆形。在 Bootstrap 3 中，使用 很容易做到这一点.img-circle，但现在我似乎无法让它工作，而且我无法在网上找到任何答案。Bootstrap 删除了 img-circle 类还是我的代码搞砸了？

It goes something like this:

它是这样的：

<!-- Within a tab-content div --> 
<div class="col-xs-7">
    <img src="img/gallery2.JPG" class="img-circle" alt="HelPic>
</div>

Hope somebody can help me out :)

希望有人可以帮助我:)

回答by Zim

It's now called rounded-circleas explained here in the BS4 docs

它现在被rounded-circle称为BS4 文档中的解释here

<img src="img/gallery2.JPG" class="rounded-circle">

Demo

演示

回答by Sisindry Medagam

In Bootstrap 4it was renamed to .rounded-circle

在Bootstrap 4 中，它被重命名为.rounded-circle

Usage :

用法 ：

<div class="col-xs-7">
    <img src="img/gallery2.JPG" class="rounded-circle" alt="HelPic>
</div>

See migration docsfrom bootstrap.

从引导程序查看迁移文档。

回答by Irving Jaime Salgado Linares

Now the class is this

现在课程是这样的

 <img src="img/img5.jpg" width="200px" class="rounded-circle float-right">