jak podać obramowanie do zawartości zakładki początkowej

Question

Używam kart ładowania początkowego i działa idealnie. Próbuję dowiedzieć się, czy istnieje sposób użycia bootstrap do podania granicy zawartości kart połączonych z granicą pigułki, aby wyglądała jak jedna skrzynka. Próbowałem to zrobić z własnymi css, ale jest granica między granicą tabulacji a granicą tabulacji, która jest marginesem, który tabletka musi mieć i której nie można usunąć. Chcę, żeby wyglądał jak na poniższym obrazku.

Answer 1

Poniższy css należy zrobić dokładnie to, czego szukasz :)

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

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

margin-bottom: 0; na .nav-tabs usuwa lukę między pigułkami i treści.

wyściółka na .tab zawartości sprawia, że ​​zawartość nie dociskana do nowych granic na lewo i prawo.

Answer 2

można użyć poniższy kod, żeby go osiągnąć:
JSfiddle Demo

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

Answer 3

ten został poproszony dawno temu, ale trick tutaj może pomóc niektórym ludziom:

umieszczone w div.container swoje .nav-tabs i .tab-content. Do tego div.container podaj stałą wysokość: 300px i border-bottom: 1px solid #ccc i overflow: hidden !important.

Następnie do .tab-content, dodaję to CSS: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

I to działa. Go wypróbować (http://jsfiddle.net/996Bw/)

Answer 4

chciałbym modyfikować odpowiedź Kisuka do następujących:

.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

Z następujący kod, wszystkie mają promień rogu, ale zakładki offset.

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

Uwaga: Jeśli ustawisz padding-left 0px nav-Tab, po pierwsze konflikty zakładka z lewym górnym promieniu treści.

Answer 6

Zmodyfikowałem odpowiedź przez @ user3749683 i @Kisuka, aby nie trzeba było zmieniać definicji istniejących stylów ładowania początkowego. Zamiast tego wystarczy dodać nową klasę do elementu nadrzędnego. Użyłem pierwszych selektorów podrzędnych, dzięki czemu możesz mieć zagnieżdżone zakładki, które niekoniecznie muszą zawierać treść z ograniczeniami.

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

struktura znaczników

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

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

Answer 7

Będąc bardziej DRY następnie @goat rozwiązania, można również ponownie wykorzystać panel css jak:

.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-treści panel panel-default i Tab- panel-korpus. Wtedy nie musisz ponownie definiować obramowania i dopełnienia. Po prostu usuń górną granicę i górny promień.