我有一个Bootstrap list-group-flush来显示左垂直导航。我想把左上角修圆。class="rounded-top"可以工作,但class="rounded-top-left"或class="rounded top-left"什么都不做?
class="rounded-top"
class="rounded-top-left"
class="rounded top-left"
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; }
1bqhqjot2#
根据Bootstrap 4.3的文档,没有实用程序类只能绕过 * 一个 * 角落:如果https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius你想要这个类,你必须自己写.我刚刚快速浏览了Bootstrap 3.4和4.2.1。版本3.4没有任何边界半径类,而4.2的选项更少,因此这不是您可以通过切换到不同版本来解决的问题。
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/
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; }
j2datikz5#
从v5开始,这可以通过Bootstrap类的组合来实现。class="rounded-top-3 rounded-end-0"会在左上角。
class="rounded-top-3 rounded-end-0"
sbdsn5lh6#
Bootstrap 5圆形圆顶的圆底圆起动圆头圆圆丸
6条答案
按热度按时间ttvkxqim1#
您可以随时创建自己的全局类。举例来说:
1bqhqjot2#
根据Bootstrap 4.3的文档,没有实用程序类只能绕过 * 一个 * 角落:如果https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius你想要这个类,你必须自己写.
我刚刚快速浏览了Bootstrap 3.4和4.2.1。版本3.4没有任何边界半径类,而4.2的选项更少,因此这不是您可以通过切换到不同版本来解决的问题。
waxmsbnn3#
我放弃了使用Bootstrap自己的默认代码,并使用了以下CSS:
更新:看起来Bootstrap不允许圆角https://v4-alpha.getbootstrap.com/utilities/borders/
jum4pzuy4#
你可以创建自己的类,比如:
j2datikz5#
从v5开始,这可以通过Bootstrap类的组合来实现。
class="rounded-top-3 rounded-end-0"
会在左上角。sbdsn5lh6#
Bootstrap 5
圆形
圆顶的
圆底
圆起动
圆头
圆
圆丸