come assegnare un bordo al contenuto della scheda bootstrap

Question

Sto usando le schede di bootstrap e funziona perfettamente. Sto cercando di capire se c'è un modo per usare il bootstrap per dare un bordo al contenuto delle schede che è collegato al bordo della pillola in modo che assomigli ad una scatola. Ho provato a farlo con il mio css, ma c'è un limite tra il bordo della pillola e il bordo del contenuto della linguetta che è un margine che la pastiglia deve avere e non può essere rimossa. Voglio che assomigli all'immagine qui sotto.

Answer 1

il seguente CSS dovrebbe fare esattamente quello che stai cercando :)

.tab-content { 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    padding: 10px; 
} 

.nav-tabs { 
    margin-bottom: 0; 
} 

margin-bottom: 0; su .nav-tabs rimuove il vuoto tra le pillole e il contenuto.

Il imbottitura su .tab-content rende il contenuto non premuto contro i nuovi confini a sinistra ea destra.

Answer 2

È possibile utilizzare il seguente codice per realizzarla:
JSfiddle Demo

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { 
border-bottom-color:#ddd; 
outline:0; 
} 
} 

Answer 3

Questo è stato chiesto molto tempo fa, ma il trucco qui potrebbe aiutare alcune persone:

messi in una div.container tua .nav-tabs e .tab-content. A quello div.container, dare un'altezza fissa dice 300px e border-bottom: 1px solid #ccc e overflow: hidden !important.

Poi al .tab-content, aggiungo questo css: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

e funziona. Provalo (http://jsfiddle.net/996Bw/)

Answer 4

vorrei modificare la risposta di Kisuka al seguente:

.tab-pane { 

    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    border-radius: 0px 0px 5px 5px; 
    padding: 10px; 
} 

.nav-tabs { 
    margin-bottom: 0; 
} 

Answer 5

Con codice seguente, tutti hanno angolo raggio, ma compensato schede.

.nav-tabs { 
    padding-left: 15px; 
    margin-bottom: 0; 
    border: none; 
} 
.tab-content { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 15px; 
} 

Attenzione: se si imposta 0px padding-left del nav-scheda, primi conflitti tab con sinistra-top raggio di contenuti.

Answer 6

Ho modificato la risposta da @ user3749683 e @Kisuka in modo da non dover modificare la definizione di eventuali stili di bootstrap esistenti. Invece, devi solo aggiungere una nuova classe all'elemento genitore. Ho usato i selettori di primo figlio in modo che tu possa avere schede annidate che non hanno necessariamente bisogno anche del contenuto con bordi.

.bordered-tab-contents > .tab-content > .tab-pane { 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    border-radius: 0px 0px 5px 5px; 
    padding: 10px; 
} 

.bordered-tab-contents > .nav-tabs { 
    margin-bottom: 0; 
} 

struttura markup

<div class="bordered-tab-contents"> 
    <ul class="nav nav-tabs"> 
     ... 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane" ...> 
      ... 
     </div> 
    </div> 
</div> 

Answer 7

Essere più asciutto, quindi @goat soluzione, si potrebbe anche riutilizzare il css del pannello come:

.tab-content.panel 
{ 
    border-top: none; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
} 


<div> 
    <ul class="nav nav-tabs"> 
     ... 
    </ul> 

    <div class="tab-content panel"> 
     <div class="tab-pane panel-body"> 
      ... 
     </div> 
    </div> 
</div> 

scheda-content Pannello-default e tabulazioni pannello pannello-corpo. Quindi non è necessario ridefinire il bordo e il riempimento. Basta rimuovere il bordo superiore e il raggio superiore.