Wie gebe ich einen Rand zum Bootstrap Tab Inhalt

Question

Ich benutze Bootstrap-Registerkarten und es funktioniert perfekt. Ich versuche herauszufinden, ob es eine Möglichkeit gibt, Bootstrap zu verwenden, um dem Inhalt der Tabs, die mit dem Rand der Pille verbunden sind, einen Rahmen zu geben, damit er wie eine Box aussieht. Ich habe versucht, dies mit meinem eigenen CSS zu tun, aber es gibt eine Obergrenze zwischen der Tab-Pille Grenze und Tab-Content-Grenze, die ein Rand ist die Tab-Pille muss und kann nicht entfernt werden. Ich möchte, dass es wie das folgende Bild aussieht.

Answer 1

Die folgende CSS sollte genau das tun, was Sie für :)

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

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

margin-bottom suchen: 0; auf .nav-tabs entfernt die Lücke zwischen den Pillen und Inhalt.

Die padding auf .tab--Gehalt macht den Inhalt nicht gegen die neuen Ränder auf der linken und rechten gedrückt.

Answer 2

können Sie den folgenden Code verwenden, es zu erreichen:
JSfiddle Demo

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

Answer 3

Das vor langer Zeit gefragt wurde, aber der Trick hier vielleicht einige Leute helfen:

in einem div.container Setzen Sie Ihre .nav-tabs und .tab-content. Zu diesen div.container, gibt eine feste Höhe sagt 300px und border-bottom: 1px solid #ccc und overflow: hidden !important.

Dann zum .tab-content, füge ich diese CSS: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

Und es funktioniert. Probieren Sie es aus (http://jsfiddle.net/996Bw/)

Answer 4

Ich würde Kisuka Antwort auf die folgende ändern:

.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

Mit folgenden Code, alle Ecke haben Radius, aber Registerkarten versetzt.

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

Vorsicht: Wenn Sie nav-Registerkarte padding-left 0px, erste Reiter Konflikte mit linken oberen Radius von Inhalten gesetzt.

Answer 6

Ich modifizierte die Antwort von @ user3749683 und @Kisuka, so dass Sie die Definition der vorhandenen Bootstrap-Stile nicht ändern müssen. Stattdessen fügen Sie dem übergeordneten Element einfach eine neue Klasse hinzu. Ich habe die ersten untergeordneten Selektoren verwendet, so dass Sie verschachtelte Tabs haben können, die nicht notwendigerweise auch den umrandeten Inhalt haben müssen.

.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; 
} 

Markup Struktur

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

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

Answer 7

Sein trockener dann @goat Lösung, können Sie auch das Panel CSS wiederverwenden wie:

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

tab-Content-Panel Panel-default und tab- Paneel-Körper. Dann müssen Sie den Rahmen und das Padding nicht neu definieren. Entfernen Sie einfach den oberen Rand und den oberen Radius.