blocks|key|2999555|text|从Bootstrap+3中删除了左侧、右侧和下方的选项卡，但您可以添加自定义CSS来实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2999556|.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;
}|code-block|syntax|javascript|2999557|工作示例：http://bootply.com/74926|offset|length|2999558|更新|style|BOLD|2999559|如果你不需要一个标签的确切外观(当每个标签被激活时，在左边或右边有适当的边框)，你可以简单地使用nav-stacked和Bootstrap+col-*来浮动标签到左边或右边……|CODE|2999560|nav-stacked演示：http://codeply.com/go/rv3Cvr0lZ4|2999561|<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>|2999562|entityMap|0|LINK|mutability|MUTABLE|url|http://bootply.com/74926|1|http://codeply.com/go/rv3Cvr0lZ4^0|0|0|5|O|0|0|0|2|0|1C|B|1Y|5|0|0|B|E|W|1|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@$I|18|J|19|1|1A]]|A|$]]|$1|K|3|L|5|6|7|1B|8|@$I|1C|J|1D|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@$I|1F|J|1G|M|Q]|$I|1H|J|1I|M|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1J|8|@$I|1K|J|1L|M|Q]]|9|@$I|1M|J|1N|1|1O]]|A|$]]|$1|T|3|U|5|D|7|1P|8|@]|9|@]|A|$E|F]]|$1|V|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

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

<pre><code>.tabs-below &gt; .nav-tabs,
.tabs-right &gt; .nav-tabs,
.tabs-left &gt; .nav-tabs {
  border-bottom: 0;
}

.tab-content &gt; .tab-pane,
.pill-content &gt; .pill-pane {
  display: none;
}

.tab-content &gt; .active,
.pill-content &gt; .active {
  display: block;
}

.tabs-below &gt; .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below &gt; .nav-tabs &gt; li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below &gt; .nav-tabs &gt; li &gt; a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below &gt; .nav-tabs &gt; li &gt; a:hover,
.tabs-below &gt; .nav-tabs &gt; li &gt; a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below &gt; .nav-tabs &gt; .active &gt; a,
.tabs-below &gt; .nav-tabs &gt; .active &gt; a:hover,
.tabs-below &gt; .nav-tabs &gt; .active &gt; a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left &gt; .nav-tabs &gt; li,
.tabs-right &gt; .nav-tabs &gt; li {
  float: none;
}

.tabs-left &gt; .nav-tabs &gt; li &gt; a,
.tabs-right &gt; .nav-tabs &gt; li &gt; a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left &gt; .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left &gt; .nav-tabs &gt; li &gt; 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 &gt; .nav-tabs &gt; li &gt; a:hover,
.tabs-left &gt; .nav-tabs &gt; li &gt; a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left &gt; .nav-tabs .active &gt; a,
.tabs-left &gt; .nav-tabs .active &gt; a:hover,
.tabs-left &gt; .nav-tabs .active &gt; a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right &gt; .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right &gt; .nav-tabs &gt; li &gt; 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 &gt; .nav-tabs &gt; li &gt; a:hover,
.tabs-right &gt; .nav-tabs &gt; li &gt; a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right &gt; .nav-tabs .active &gt; a,
.tabs-right &gt; .nav-tabs .active &gt; a:hover,
.tabs-right &gt; .nav-tabs .active &gt; a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}
</code></pre>

<p>Working example: <a href="http://bootply.com/74926" rel="noreferrer">http://bootply.com/74926</a></p>

<p><strong><em>UPDATE</em></strong></p>

<p>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 <code>nav-stacked</code>, along with Bootstrap <code>col-*</code> to float the tabs to the left or right...</p>

<p><code>nav-stacked</code> demo: <a href="http://codeply.com/go/rv3Cvr0lZ4" rel="noreferrer">http://codeply.com/go/rv3Cvr0lZ4</a></p>

<pre><code>&lt;ul class="nav nav-pills nav-stacked col-md-3"&gt;
    &lt;li&gt;&lt;a href="#a" data-toggle="tab"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#b" data-toggle="tab"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#c" data-toggle="tab"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>


blocks|key|176463|text|Bootstrap团队似乎已经移除了它。请看这里：https://github.com/twbs/bootstrap/issues/8922。@Skelly的回答涉及到自定义css，我不想这样做，所以我使用了网格系统和nav-pills。它工作得很好，看起来也很棒。代码如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|176464|<div+class="row">

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

++
++<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>|code-block|syntax|javascript|176465|你可以在这里看到这一点：http://bootply.com/81948|176466|更新+@SeanK提供了不必通过Javascript启用导航药丸的选项，而是使用data-toggle="pill"。在这里查看：http://bootply.com/96067。谢谢你肖恩。|style|BOLD|CODE|176467|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/issues/8922|1|http://bootply.com/81948|2|http://bootply.com/96067^0|P|19|0|0|0|C|O|1|0|0|2|14|I|1T|O|2|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|K|3|L|5|6|7|1A|8|@$A|1B|B|1C|M|N]|$A|1D|B|1E|M|O]]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|P|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]|Z|$5|S|T|U|C|$V|10]]]]

<p>The Bootstrap team seems to have removed it. See here: <a href="https://github.com/twbs/bootstrap/issues/8922">https://github.com/twbs/bootstrap/issues/8922</a> . @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:</p>

<pre><code>&lt;div class="row"&gt;

  &lt;!-- Navigation Buttons --&gt;
  &lt;div class="col-md-3"&gt;
    &lt;ul class="nav nav-pills nav-stacked" id="myTabs"&gt;
      &lt;li class="active"&gt;&lt;a href="#home" data-toggle="pill"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#profile" data-toggle="pill"&gt;Profile&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#messages" data-toggle="pill"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

  &lt;!-- Content --&gt;
  &lt;div class="col-md-9"&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="home"&gt;Home&lt;/div&gt;
      &lt;div class="tab-pane" id="profile"&gt;Profile&lt;/div&gt;
      &lt;div class="tab-pane" id="messages"&gt;Messages&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>You can see this in action here: <a href="http://bootply.com/81948">http://bootply.com/81948</a></p>

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


blocks|key|180418|text|要获得对Bootstrap+3的左侧和右侧选项卡(现在也支持横向)的支持，可以使用引导-垂直-选项卡组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180419|https://github.com/dbtek/bootstrap-vertical-tabs|offset|length|180420|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

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

<p><a href="https://github.com/dbtek/bootstrap-vertical-tabs" rel="noreferrer">https://github.com/dbtek/bootstrap-vertical-tabs</a></p>


blocks|key|180422|text|您应该不需要重新添加此内容。这是故意删除的。文档做了一些修改，只在pills组件下面提到了必要的CSS类("nav-stacked")，但也应该适用于tab。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180423|本教程将介绍如何正确使用Bootstrap+3设置来创建垂直选项卡：|180424|tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills|offset|length|180425|entityMap|0|LINK|mutability|MUTABLE|url|http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills^0|0|0|0|1L|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>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.</p>

<p>This tutorial shows how to use the Bootstrap 3 setup properly to do vertical tabs:<br>
<a href="http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills">tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills</a></p>


<p>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 top. When I try the following;</p>

<pre><code>   &lt;ul class="nav nav-tabs nav-stacked"&gt;
        &lt;li&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab3" data-toggle="tab"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;


    &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane fade" id="tab1"&gt;
            Tab 1 content
        &lt;/div&gt;
        &lt;div class="tab-pane fade" id="tab2"&gt;
            Tab 2 content              
        &lt;/div&gt;
        &lt;div class="tab-pane fade" id="tab3"&gt;
            Tab 3 content
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Tabs are stacked on top of each other, but are not properly rendered as being turned to the left, instead they are just horizontal tabs stuck on top of each other. Tab content is properly shown/hidden in the content divs. </p>

<p>This was handled in Bootstrap 2.x using the <strong>tab-left</strong> and <strong>tab-right</strong> classes, but this is deprecated in Bootstrap 3 and doesn't really seem to be replaced with anything. Does anyone know if proper left-right tab rendering is possible in the Bootstrap 3 Tab plugin?</p>


Stacked Tabs in Bootstrap 3

我正在尝试使用Bootstrap 3中的Tab jquery插件实现左对齐的堆叠标签，其中标签垂直呈现在标签内容的左侧，而不是顶部。当我尝试以下操作时；   <ul class="nav nav-tabs nav-stacked">        <li><a href="#tab1" data-toggle="tab...

问Bootstrap 3中的堆叠标签
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3中的堆叠标签EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3中的堆叠标签
EN