Question

在bootstrap 3中，我有一个按钮组。如果按钮组中的第一项具有隐藏类，则第一个可见元素将失去它的圆角边界半径。

如何修改下面的CSS，以便如果第一个元素有一个隐藏类，第一个可见元素应该仍然在左边有圆角？

＆＃13;

 body{padding:20px}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

＆＃13;

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

＆＃13;

Answer 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上的Bootstrap CSS边框半径

1 个答案: