Come ignorare gli elementi nascosti in un gruppo di pulsanti Bootstrap?

Question

Ho un gruppo di pulsanti contenente 10 pulsanti. Sotto certe larghezze dello schermo (reattivo) nascondo alcuni di questi pulsanti con le query multimediali.

Il problema è che se nascondo l'ultimo pulsante i bordi del nuovo ultimo pulsante non diventano arrotondati.

È un problema difficile da descrivere, ma molto facile da mostrare in un Fiddle.

La mia domanda: come posso aggiungere gli angoli arrotondati all'ultimo pulsante visibile nel gruppo di pulsanti, piuttosto che semplicemente l'ultimo pulsante, come è attualmente.

Codice da violino sotto, come da regolamento del SO:

<div class="btn-group" id="sortBtns" role="group"> 
    <button type="button" class="btn btn-default">First</button> 
    <button type="button" class="btn btn-default">Second</button> 
    <button type="button" class="btn btn-default">Third</button> 
    <button type="button" class="btn btn-default">Fourth</button> 
    <button type="button" class="btn btn-default">Fifth</button> 
    <button type="button" class="btn btn-default">Sixth</button> 
</div> 

<div class="btn-group" id="sortBtns" role="group"> 
    <button type="button" class="btn btn-default">First</button> 
    <button type="button" class="btn btn-default">Second</button> 
    <button type="button" class="btn btn-default">Third</button> 
    <button type="button" class="btn btn-default">Fourth</button> 
    <button type="button" class="btn btn-default">Fifth</button> 
    <button type="button" class="btn btn-default" style="display:none;">Sixth</button> 
</div> 

Nota l'assenza di angoli arrotondati su 'quinta' nel secondo gruppo di pulsanti.

Posso farlo utilizzando JavaScript aggiungendo una nuova classe all'ultimo elemento visibile, ma preferirei di no. Esiste una soluzione solo CSS più pulita?

Answer 1

Un'opzione è quella di duplicare semplicemente il codice e aggiungere una classe hidden-xs al primo blocco di codice e visible-xs all'altro blocco di codice.

Ti piace questa:

<div class="btn-group hidden-xs" id="sortBtns" role="group"> 
    <button type="button" class="btn btn-default">First</button> 
    <button type="button" class="btn btn-default">Second</button> 
    <button type="button" class="btn btn-default">Third</button> 
    <button type="button" class="btn btn-default">Fourth</button> 
    <button type="button" class="btn btn-default">Fifth</button> 
    <button type="button" class="btn btn-default">Sixth</button> 
</div> 

<div class="btn-group visible-xs" id="sortBtns2" role="group"> 
    <button type="button" class="btn btn-default">First</button> 
    <button type="button" class="btn btn-default">Fifth</button> 
    <button type="button" class="btn btn-default">Sixth</button> 
</div> 

Un'altra opzione è quella di applicare la regola CSS all'elemento tagliente:

.edgy-right-element { 
     border-top-left-radius: 0; 
     border-bottom-left-radius: 0; 
     border-top-right-radius: 4px; 
     border-bottom-right-radius: 4px; 
    } 

Answer 2

Se non ti dispiace l'aggiunta di una dipendenza, vi consiglio AngularJS' ng-if. È utile when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes. Rimuoverà l'elemento dal DOM e ti permetterà di raggiungere il tuo obiettivo.

Answer 3

Ecco una soluzione utilizzando jQuery:

$('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0); 
$('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({ 
    'border-top-left-radius': '3px', 
    'border-bottom-left-radius': '3px', 
}); 
$('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({ 
    'border-top-right-radius': '3px', 
    'border-bottom-right-radius': '3px', 
}); 

Per ogni gruppo di pulsanti con bottoni nascosti, questo rimuoverà i raggi di frontiera per tutti i pulsanti all'interno, e quindi aggiungere di nuovo raggi di frontiera per i primi e gli ultimi pulsanti visibili.

OP's Fiddle with solution