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

Question 1

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

Question 2

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

CSS

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

SCSS для Начальной загрузки 4

.tab-pane {
    border-left: 1px solid $nav-tabs-border-color;
    border-right: 1px solid $nav-tabs-border-color;
    border-bottom: 1px solid $nav-tabs-border-color;
    border-radius: 0px 0px $nav-tabs-border-radius $nav-tabs-border-radius;
    padding: $spacer;
}

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

Question 3

Question 4

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

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

Осторожность: Если Вы устанавливаете военно-морскую вкладку, оставил дополнению 0px, первые конфликты вкладки с лево-главным радиусом содержания.

Question 5

Будучи большим количеством 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>

значение по умолчанию панели панели содержания вкладки и тело панели области вкладки. Затем Вы не должны переопределять границу и дополнение. Просто удалите верхнюю границу и главный радиус.

Question 6

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

Вставленный div.container Ваш .nav-tabs и .tab-content. К этому div.container, дайте фиксированную высоту, говорит 300 пкс и 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/ )

Question 7

Question 8

Я изменил ответ @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>

Question 9

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

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

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

граничная нижняя часть: 0; на .nav-вкладки удаляет разрыв, промежуточный таблетки и содержание.

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

Question 10

Можно использовать следующий код для достижения его:
Демонстрация JSfiddle

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
border-bottom: 1px solid #dddddd;
outline:0;
 }
}

Popnoodles · Answer 1 · 31 October 2019 в 13:28