Bootstrap CSS Grenze Radius auf der ersten Btn in Gruppe

Question

In Bootstrap 3 habe ich eine Schaltfläche Gruppe. Wenn das erste Element in der Schaltflächengruppe über eine ausgeblendete Klasse verfügt, verliert das erste sichtbare Element den abgerundeten Rahmenradius.

Wie kann ich das CSS unten ändern, so dass, wenn das erste Element eine versteckte Klasse hat, das erste sichtbare Element immer noch die abgerundeten Ecken auf der linken Seite haben soll?

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

Die beste Lösung Javascript wäre.

Wenn Sie Ihre HTML wissen nicht (Sie nur diese drei divs haben) ändern können Sie:

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

Sie sollten dann die Regel oder ein neues wichtig zur Regel hinzufügen, ändern! über.

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