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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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 для Bootstrap 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;
}

Ответ 3

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

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

Внимание: если вы устанавливаете pad-pad padding-left 0px, первая вкладка конфликтует с левым верхним радиусом содержимого.

Ответ 4

Будучи более 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>

панель панели вкладок - панель по умолчанию и панель панели вкладок. Тогда вам не нужно переопределять границу и дополнение. Просто удалите верхнюю границу и верхний радиус.

Ответ 5

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

Вставьте 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/)

Ответ 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>

Ответ 7

Основываясь на ответе Popnoodles, добавление .border .border-top-0 к .tab-pane также работает в Bootstrap 4.3

  <div class="tab-content">
    <div class="tab-pane border border-top-0">
      <!-- tab content -->
    </div>
  </div>

или в SCSS

.tab-pane {
  @extend .border;
  @extend .border-top-0;
  @extend .p-3;
}

Ответ 8

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

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