Twitter Bootstrap 標簽顛倒

Question

我使用了 Twitter Bootstrap ( http://twitter.github.io/bootstrap/javascript.html#tabs ) 標簽功能，但我希望它是顛倒的，頂部顯示內容，底部顯示 TabMenuNav！ 這可能嗎？ 任何解決方法？

Answer 1

使用以下 CSS 來實現您的預​​期。 我向.tab-content類添加了邊框以突出顯示內容。

.tab-content {
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
}

.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-top-color: transparent;
}

HTML 結構應該是這樣的：

<div class="tabbable">
    <div class="tab-content">
        <div id="tab1" class="tab-pane active">
            tab1 content</div>
        <div id="tab2" class="tab-pane">
            tab2 content</div>
        <div id="tab3" class="tab-pane">
            tab3 content</div>
        <div id="tab4" class="tab-pane">
            tab4 content</div>
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
        <li><a href="#tab2" data-toggle="tab">tab2</a></li>
        <li><a href="#tab3" data-toggle="tab">tab3</a></li>
        <li><a href="#tab4" data-toggle="tab">tab4</a></li>
    </ul>
</div>

引導示例。

Answer 2

對於那些正在尋找 Bootstrap 4 解決方案的人。

Bootstrap 曾經使用 tabs-below 類來實現這一點。 但它在版本 3 中被刪除。

我在下面的代碼中“恢復”了這個功能。 您只需要將tabs-below類添加到您的ul元素。 檢查https://jsfiddle.net/oniltonmaciel/nhfrz2bc/以獲得完整的解決方案。

css：

.tabs-below {
  border-bottom-width: 0px;
  border-top: 1px solid #dee2e6;
}

.tabs-below .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.tabs-below .nav-item {
  margin-bottom: 0px;
  margin-top: -1px;
}

.tabs-below .nav-item.show .nav-link, .tabs-below .nav-link.active {
  border-color: #fff #dee2e6 #dee2e6  #dee2e6;
}

html：

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><p>Contents of tab 1</p></div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><p>Contents of tab 2</p></div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"><p>Contents of tab 3</p></div>
  </div>
  <ul class="nav nav-tabs tabs-below" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
  </ul>

Answer 3

嘗試反轉順序，首先使用<div class="tab-content"> ，最后使用<ul class="nav nav-tabs" id="myTab"> 。

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>