Как предоставить границу для содержимого вкладки начальной загрузки

Question

Я использую вкладки начальной загрузки и отлично работает. Я пытаюсь выяснить, есть ли способ использовать бутстрап, чтобы предоставить границу содержания вкладок, которые связаны с границей таблетки, поэтому она будет выглядеть как одна коробка. Я пробовал делать это со своим собственным css, но между границей таблеток и границей содержимого табуляции есть кепка, которая является маркой, которую таблетка таблеток должна иметь и не может быть удалена. Я хочу, чтобы это выглядело следующим образом.

Answer 1

Следующая CSS должен делать именно то, что вы ищете :)

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

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

краю дна: 0; на .nav-tabs удаляет промежуток между таблетками и контентом.

обивка на -контента TAB- делает содержание не прижатым новых границ на левой и правой.

Answer 2

Вы можете использовать следующий код для достижения этой цели:
JSfiddle Demo

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

Answer 3

Это был задан давно, но трюк здесь может помочь некоторым людям:

Помещенный в div.container ваш .nav-tabs и .tab-content. К этому div.container, укажите фиксированную высоту: 300px и border-bottom: 1px solid #ccc и overflow: hidden !important.

Тогда к .tab-content, добавить этот CSS: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

И это работает. Попробуйте (http://jsfiddle.net/996Bw/)

Answer 4

Я бы изменить ответ Kisuka на следующее:

.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

С следующим кодом, все углу имеет радиус, но вкладки смещения.

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

Внимание: Если вы установили обивку левого 0px СЧА вкладки, первая вкладку конфликтует с левым верхним радиусом содержимого.

Answer 6

Я изменил ответ на @ user3749683 и @Kisuka, так что вам не нужно менять определение существующих стилей загрузки. Вместо этого вы просто добавляете новый класс в родительский элемент. Я использовал первые дочерние селекторы, чтобы вы могли иметь вложенные вкладки, которые необязательно должны иметь пограничный контент.

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

структура разметки

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

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

Answer 7

Будучи более DRY, то @goat решения можно также повторно использовать панель CSS, как:

.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- панель панели. Тогда вам не нужно переопределять границу и дополнение. Просто удалите верхнюю границу и верхний радиус.