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

oxf4rvwz 于 2023-11-19 发布在 Bootstrap

关注(0)|答案(4)|浏览(128)

我在代码中直接使用了这个小提琴，目的是创建一个圆形按钮。
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（或类似的）以及这个类。
检查检查器，它肯定是在应用这个，但是一定有什么东西覆盖或改变了这个行为，因为它仍然看起来是方形的。
我无法找到任何解释或工作代码通过谷歌将产生一个圆形按钮在引导4.有什么建议？

css

来源：https://stackoverflow.com/questions/56646253/having-trouble-getting-circular-buttons-in-bootstrap-4

4条答案

按热度按时间

62o28rlo1#

这是因为.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

赞(0）回复(0）举报 2023-11-19

wyyhbhjk2#

需要更新-webkit-appearance: none;
检查小提琴https://jsfiddle.net/f46ab37x/

赞(0）回复(0）举报 2023-11-19

ljsrvy3e3#

如果你使用的是<button></button>，那么只需将border-radius:50%!important和padding: 1.375rem 0.75rem!important;添加到.btn。

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

个字符

赞(0）回复(0）举报 2023-11-19

cqoc49vn4#

也许你可以做一个总是有效的引导技巧。

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

字符串
基本上只需要将rounded-circle添加到类中。

赞(0）回复(0）举报 2023-11-19

我来回答

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

4条答案

相关问题

热门标签

最新问答