부트 스트랩 3의 스택 탭

부트 스트랩 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