ブートストラップグループ内の最初のbtnのCSS境界半径

Question

ブートストラップ3では、私はボタングループを持っています。ボタングループ内の最初の項目に非表示のクラスがある場合、最初に表示される要素は丸みを帯びた境界線の半径を失います。

最初の要素に非表示のクラスがある場合、最初に表示される要素の左端に丸みのある角が残るように、以下のCSSを変更するにはどうすればよいですか？

body{padding: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>

Answer 1

最善の解決策は、Javascriptのだろう。あなたは（あなたがちょうどそれらの3つのdivを持つことになります）、あなたのHTMLが変更されません知っている場合

あなたが使用することができます。

.btn-group div:first-child + div:not(.hidden) { 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
} 

は、その後、以下のルールを変更する必要がありますか、ルールに重要を追加します！上記。

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle)