1

我在其他地方找不到这个问题的答案......

在 bootstrap 2.x 中，您可以使用 js 选项卡功能并将它们显示在左侧：

<div class="tabbable tabs-left"> <-- TABS-LEFT HERE!!!

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

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

</div>

但是现在该功能似乎没有在 bootstrap 3.0 中继承，而且我在 bootstrap 网站上没有看到任何文档。有谁知道这是否被删除？很难相信会是……

谢谢您的帮助！

4

3 回答 3

1

不幸的是，当我也使用它们时，似乎所有非默认的制表符对齐在 3.0 中都已删除，没有等效项。

直接从上面的链接复制，所有三个标签对齐都从 3.0 中删除：

  • .tabs-left
  • .tabs-right
  • .tabs-below
于 2013-08-27T02:10:00.167 回答
0

这就是我解决它的方法。

<div class="tabbable tabs-left">
    <div class="row">
        <div class="col-md-4">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#location-tab" data-toggle="tab">Location</a></li>
                <li><a href="#amenities-tab" data-toggle="tab">Amenities</a></li>
                <li><a href="#photos-tab" data-toggle="tab">Photos</a></li>
            </ul>
        </div>

        <div class="col-md-8">
    <div class="tab-content">
        <div class="tab-pane active in" id="location-tab">
于 2015-02-05T00:16:55.450 回答
0

本文提供了完整的代码答案并在页面下方演示了一种方式： http ://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

简单的答案是您需要添加.nav-stacked到然后使用正常的行/列系统来布局它。BS3 本身并不支持像 BS2 那样自行浮动标签。

http://jsbin.com/kobegaguwa/1/edit

请注意，对于 jsbin 预览，您需要使用 xs 列，否则它将响应式地将所有内容堆叠在 1 列中。

默认样式不适用于标签，但适用于药丸。

于 2017-01-11T01:47:49.600 回答