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

Bootply示例。