Bootstrap 右上角圆角

Question

我有一个 Bootstrap list-group-flush 来显示左侧垂直导航。

我想让左上角变圆。

class="rounded-top"

有效，但

class="rounded-top-left"

或

class="rounded top-left"

没有任何作用？

Answer 1

您始终可以创建自己的全局类。例如：

.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;
}

Answer 2

根据 Bootstrap 4.3 的文档，没有实用程序类只能圆角：https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius。如果您想要该课程，您必须自己编写。 我刚刚快速浏览了 Bootstrap 3.4 和 4.2.1。版本 3.4 没有任何边框半径类，而 4.2 的选项较少，因此您无法通过切换到其他版本来解决此问题。

Answer 3

#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/

Answer 4

.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;
  } 

Answer 5

class="rounded-top-3 rounded-end-0"

会将左上角变圆。