在 Bootstrap 4 中获取圆形按钮时遇到问题

Question

我直接在我的代码中使用了这个小提琴。这个想法是创建一个圆形按钮。

https://jsfiddle.net/yeyene/59e5e1ya/

此代码适用于 bootstrap 3。当引用 bootstrap 4 使用它时，按钮是方形的而不是圆形的。这是一个例子：

https://jsfiddle.net/NibblyPig/fsedc5p6/

它应用的CSS是：

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

与所有按钮一样，我将类设置为

btn

和

btn-success

（或类似）以及此类。

检查检查器，它肯定正在应用此行为，但是必须有某些东西覆盖或更改此行为，因为它仍然显示为正方形。

我无法通过谷歌找到任何解释或工作代码来在 bootstrap 4 中生成一个圆形按钮。有什么建议吗？

Answer 1

这是因为

.btn-success

被

border-color

覆盖了。您可以使用

.btn-success.btn-circle

来定位它们。还尝试覆盖悬停样式。

添加了CSS：

.btn-circle.btn-success {
  border-color: transparent;
}

.btn-circle.btn-success:hover {
  border-color: transparent;
}

JSfiddle 演示

Answer 2

需要更新

-webkit-appearance: none;

检查小提琴https://jsfiddle.net/f46ab37x/

Answer 3

如果您使用

<button></button>

，则只需将

border-radius:50%!important

和

padding: 1.375rem 0.75rem!important;

添加到

.btn

。

.btn {
  border-radius: 50%!important;
  padding: 1.375rem 0.75rem!important;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

Answer 4

也许你可以做一个始终有效的引导技巧。这是方法

button class="btn btn-success rounded-circle"> $$ </button>

基本上只需将

rounded-circle

添加到班级即可。