在组中的第一个 btn 上引导 CSS 边框半径
Posted
技术标签:
【中文标题】在组中的第一个 btn 上引导 CSS 边框半径【英文标题】：Bootstrap CSS border radius on first btn in group 【发布时间】：2016-10-24 10:22:23 【问题描述】：在引导程序 3 中，我有一个按钮组。如果按钮组中的第一项具有隐藏类，则第一个可见元素将失去其圆角边框半径。
如何修改下面的 CSS，以便如果第一个元素具有隐藏类，则第一个可见元素应该仍然在左侧具有圆角？
bodypadding:20px
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
border-radius: 0;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div role="group" class="btn-group btn-group-sm" id="preview-paging">
<div role="group" class="btn-group hidden" id="preview-type">
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" type="button">
<span id="preview-label">Desktop</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a data-device="desktop" href="#design">Desktop</a></li>
<li><a data-device="mobile" href="#design">Mobile</a></li>
</ul>
</div>
<div class="btn btn-default btn-sm btn-paging" id="preview-prev"><i class="fa fa-chevron-left"></i></div>
<div class="btn btn-default btn-sm btn-paging" id="preview-next"><i class="fa fa-chevron-right"></i></div>
</div>【问题讨论】：
【参考方案1】：最好的解决方案是 javascript。
如果你知道你的 html 不会改变（你只有这 3 个 div），你可以使用：
.btn-group div:first-child + div:not(.hidden)
border-top-left-radius: 3px;
border-top-right-radius: 3px;
然后您应该更改下面的规则或在上面的规则中添加 !important。
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
【讨论】：
以上是关于在组中的第一个 btn 上引导 CSS 边框半径的主要内容，如果未能解决你的问题，请参考以下文章