Bootstrap右上角圆角

vof42yt1 于 12个月前发布在 Bootstrap

关注(0)|答案(6)|浏览(137)

我有一个Bootstrap list-group-flush来显示左垂直导航。
我想把左上角修圆。class="rounded-top"可以工作，但class="rounded-top-left"或class="rounded top-left"什么都不做？

twitter-bootstrap

来源：https://stackoverflow.com/questions/58087100/bootstrap-rounded-top-right-corner

6条答案

按热度按时间

ttvkxqim1#

您可以随时创建自己的全局类。举例来说：

.rounded-top-left-1 {
    border-top-left-radius: 1rem;
}
.rounded-top-right-1 {
    border-top-right-radius: 1rem;
}
.rounded-bottom-left-1 {
    border-bottom-left-radius: 1rem;
}
.rounded-bottom-right-1 {
    border-bottom-right-radius: 1rem;
}

赞(0）回复(0）举报 12个月前

1bqhqjot2#

根据Bootstrap 4.3的文档，没有实用程序类只能绕过 * 一个 * 角落：如果https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius你想要这个类，你必须自己写.
我刚刚快速浏览了Bootstrap 3.4和4.2.1。版本3.4没有任何边界半径类，而4.2的选项更少，因此这不是您可以通过切换到不同版本来解决的问题。

赞(0）回复(0）举报 12个月前

waxmsbnn3#

我放弃了使用Bootstrap自己的默认代码，并使用了以下CSS：

#corner1 {
            border-top-left-radius: 3px;
        }

<a href="home" id="corner1" class="list-group-item">Link here</a>

更新：看起来Bootstrap不允许圆角https://v4-alpha.getbootstrap.com/utilities/borders/

赞(0）回复(0）举报 12个月前

jum4pzuy4#

你可以创建自己的类，比如：

.border-upper-radius {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }  
  .border-downer-radius {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

赞(0）回复(0）举报 12个月前

j2datikz5#

从v5开始，这可以通过Bootstrap类的组合来实现。
class="rounded-top-3 rounded-end-0"会在左上角。

赞(0）回复(0）举报 12个月前

sbdsn5lh6#

Bootstrap 5
圆形
圆顶的
圆底
圆起动
圆头
圆
圆丸

赞(0）回复(0）举报 12个月前