부트 스트랩 3의 탭 jquery 플러그인을 사용하여 왼쪽 정렬 된 스택 탭을 구현하려고합니다. 탭은 상단이 아닌 탭 내용의 왼쪽에 수직으로 렌더링됩니다. 내가 다음을 시도 할 때;
<ul class="nav nav-tabs nav-stacked">
<li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
Tab 1 content
</div>
<div class="tab-pane fade" id="tab2">
Tab 2 content
</div>
<div class="tab-pane fade" id="tab3">
Tab 3 content
</div>
</div>탭은 서로 쌓여 있지만 왼쪽으로 바른 것으로 제대로 렌더링되지 않고 가로 탭만 붙어 있습니다. 컨텐츠 div에 탭 컨텐츠가 올바르게 표시 / 숨겨집니다.
이것은 탭 왼쪽 및 탭 오른쪽 클래스를 사용하여 Bootstrap 2.x에서 처리 되었지만 Bootstrap 3에서는 더 이상 사용되지 않으며 실제로 다른 것으로 대체되지 않는 것 같습니다. Bootstrap 3 Tab 플러그인에서 올바른 왼쪽 탭 렌더링이 가능한지 아는 사람이 있습니까?
답변
왼쪽, 오른쪽 및 아래 탭이 Bootstrap 3에서 제거되었지만이를 위해 사용자 정의 CSS를 추가 할 수 있습니다.
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-below > .nav-tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: #ffffff;
}실제 예 : http://bootply.com/74926
최신 정보
탭의 정확한 모양이 필요하지 않은 경우 (각 탭이 활성화 될 때 왼쪽이나 오른쪽에 적절하게 정렬되어 있음) nav-stacked부트 스트랩과 함께을 사용 col-*하여 탭을 왼쪽이나 오른쪽으로 띄울 수 있습니다 …
nav-stacked데모 : http://codeply.com/go/rv3Cvr0lZ4
<ul class="nav nav-pills nav-stacked col-md-3">
<li><a href="#a" data-toggle="tab">1</a></li>
<li><a href="#b" data-toggle="tab">2</a></li>
<li><a href="#c" data-toggle="tab">3</a></li>
</ul>답변
부트 스트랩 팀이 제거 한 것 같습니다. https://github.com/twbs/bootstrap/issues/8922를 참조하십시오 . @ Skelly의 대답은 원하지 않는 사용자 정의 CSS와 관련이 있으므로 그리드 시스템과 탐색 필을 사용했습니다. 잘 작동하고 멋지게 보였습니다. 코드는 다음과 같습니다.
<div class="row">
<!-- Navigation Buttons -->
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked" id="myTabs">
<li class="active"><a href="#home" data-toggle="pill">Home</a></li>
<li><a href="#profile" data-toggle="pill">Profile</a></li>
<li><a href="#messages" data-toggle="pill">Messages</a></li>
</ul>
</div>
<!-- Content -->
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="profile">Profile</div>
<div class="tab-pane" id="messages">Messages</div>
</div>
</div>
</div>http://bootply.com/81948 에서이 작업을 볼 수 있습니다.
[업데이트]
@SeanK는 Javascript를 통해 nav-pill을 사용하지 않고 대신을 사용하는 옵션을 제공합니다 data-toggle="pill". http://bootply.com/96067 에서 확인하십시오 . 고마워 션.
답변
Bootstrap 3에 대한 왼쪽 및 오른쪽 탭 (현재 옆으로도 있음)을 지원하기 위해 bootstrap-vertical-tabs 구성 요소를 사용할 수 있습니다.
https://github.com/dbtek/bootstrap-vertical-tabs
답변
다시 추가 할 필요는 없습니다. 의도적으로 제거되었습니다. 설명서가 다소 변경되었으며 필요한 CSS 클래스 ( “nav-stacked”)는 Pills 구성 요소에서만 언급되었지만 탭에서도 작동합니다.
이 튜토리얼에서는 Bootstrap 3 설정을 사용하여 수직 탭을 올바르게 수행하는 방법을 보여줍니다.
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
답변
