Question

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

该代码虽然适用于引导程序3。当使用它引用引导程序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（或类似名称）。

检查检查器，肯定是在应用此方法，但是必须重写或更改此行为，因为它仍然显示为正方形。

我无法通过Google找到任何说明或工作代码，而这些代码或工作代码会在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 Demo

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>

在Bootstrap 4中无法获取圆形按钮

3 个答案: