부트 스트랩 탭 내용에 테두리를 지정하는 방법

부트 스트랩 탭 내용에 테두리를 지정하는 방법

---

나는 부트 스트랩 탭을 사용하고 있으며 완벽하게 작동합니다. 나는 알약의 테두리에 연결된 탭의 내용에 테두리를 제공하기 위해 부트 스트랩을 사용하는 방법이 있는지 알아 내려고 노력하고 있습니다. 나는 내 자신의 CSS로 이것을 시도했지만 탭 알약 테두리와 탭 콘텐츠 테두리 사이에 탭 알약이 있어야하고 제거 할 수없는 여백이 있습니다. 아래 이미지처럼 보이기를 원합니다.

---

다음 CSS는 원하는 것을 정확히 수행해야합니다. :)

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

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

margin-bottom : 0; 에 .nav 탭이 알약과 내용 사이의 간격을 제거합니다.

.tab-content 의 패딩 은 콘텐츠 가 왼쪽과 오른쪽의 새 테두리에 눌리지 않도록합니다.

---

나는 다음에 대한 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;
}

부트 스트랩 4 용 SCSS

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

---

다음 코드를 사용하면 모든 모서리에 반경이 있지만 탭은 오프셋됩니다.

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

주의 : nav-tab의 padding-left 0px를 설정하면 첫 번째 탭이 내용의 왼쪽 상단 반경과 충돌합니다.

---

@goat 솔루션보다 더 DRY이므로 다음과 같이 패널 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-content panel panel-default 및 tab-pane panel-body. 그러면 테두리와 패딩을 다시 정의 할 필요가 없습니다. 상단 테두리와 상단 반경을 제거하기 만하면됩니다.

---

이것은 오래 전에 요청되었지만 여기의 트릭은 일부 사람들에게 도움이 될 수 있습니다.

A의 넣어 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/ )

---

기존 부트 스트랩 스타일의 정의를 변경할 필요가 없도록 @ 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>

---

Popnoodles의 답변에 따라 추가 .border .border-top-0할 수 .tab-pane도 부트 스트랩 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;
}

---

그것을 달성하기 위해 다음 코드를 사용할 수 있습니다 :
JSfiddle 데모

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

참고 URL : https://stackoverflow.com/questions/15316559/how-to-give-a-border-to-bootstrap-tab-contents