Question

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

我想将左上角四舍五入。 class="rounded-top"有效，但是class="rounded-top-left"或class="rounded top-left"什么也没做？

Answer 1

根据Bootstrap 4.3的文档，没有实用程序类只能将一个角取整：https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius。如果您想要该类，则必须自己编写。

我只是快速浏览了Bootstrap 3.4和4.2.1。 3.4版没有任何边界半径类，而4.2版具有较少的选项，因此您无法通过切换到其他版本来解决此问题。

Answer 2

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

.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 3

我放弃了使用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/

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

引导圆角右上角

4 个答案: