Stacked Tabs in Bootstrap 3

前端 未结 4 1853
轮回少年
轮回少年 2020-11-27 09:20

I am trying to implement left-aligned stacked tabs using the Tab jquery plugin in Bootstrap 3 where tabs are rendered vertically to the left of tab content, rather than on t

相关标签:
4条回答
  • 2020-11-27 09:30

    The Bootstrap team seems to have removed it. See here: https://github.com/twbs/bootstrap/issues/8922 . @Skelly's answer involves custom css which I didn't want to do so I used the grid system and nav-pills. It worked fine and looked great. The code looks like so:

    <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>
    

    You can see this in action here: http://bootply.com/81948

    [Update] @SeanK gives the option of not having to enable the nav-pills through Javascript and instead using data-toggle="pill". Check it out here: http://bootply.com/96067. Thanks Sean.

    0 讨论(0)
  • 2020-11-27 09:30

    To get left and right tabs (now also with sideways) support for Bootstrap 3, bootstrap-vertical-tabs component can be used.

    https://github.com/dbtek/bootstrap-vertical-tabs

    0 讨论(0)
  • 2020-11-27 09:43

    Left, Right and Below tabs were removed from Bootstrap 3, but you can add custom CSS to achieve this..

    .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 #ffffd;
    }
    
    .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: #ffffd;
      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 #ffffd #ffffd #ffffd;
    }
    
    .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 #ffffd;
    }
    
    .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 #ffffdffffd #eeeeee #eeeeee;
    }
    
    .tabs-left > .nav-tabs .active > a,
    .tabs-left > .nav-tabs .active > a:hover,
    .tabs-left > .nav-tabs .active > a:focus {
      border-color: #ffffd transparent #ffffd #ffffd;
      *border-right-color: #ffffff;
    }
    
    .tabs-right > .nav-tabs {
      float: right;
      margin-left: 19px;
      border-left: 1px solid #ffffd;
    }
    
    .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 #ffffdffffd;
    }
    
    .tabs-right > .nav-tabs .active > a,
    .tabs-right > .nav-tabs .active > a:hover,
    .tabs-right > .nav-tabs .active > a:focus {
      border-color: #ffffd #ffffd #ffffd transparent;
      *border-left-color: #ffffff;
    }
    

    Working example: http://bootply.com/74926

    UPDATE

    If you don't need the exact look of a tab (bordered appropriately on the left or right as each tab is activated), you can simple use nav-stacked, along with Bootstrap col-* to float the tabs to the left or right...

    nav-stacked demo: 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>
    
    0 讨论(0)
  • 2020-11-27 09:50

    You should not need to add this back in. This was removed purposefully. The documentation has changed somewhat and the CSS class that is necessary ("nav-stacked") is only mentioned under the pills component, but should work for tabs as well.

    This tutorial shows how to use the Bootstrap 3 setup properly to do vertical tabs:
    tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

    0 讨论(0)
提交回复
热议问题