Question

我在其他地方找不到答案......

在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网站上看不到任何文档。有谁知道这是否被删除？很难相信它会......

感谢您的帮助！

Answer 1

不幸的是，当我也使用它们时，似乎所有的non-default tab alignments都已在3.0中删除而没有相应的内容。

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

.tabs-left
.tabs-right
.tabs-below

Answer 2

这就是我解决它的方法。

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

Answer 3

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

简单的答案是你需要添加# Fixed permissions CarrierWave.configure do |config| config.permissions = 0666 config.directory_permissions = 0777 config.storage = :file end然后使用普通的行/列系统进行布局。 BS3本身并不像BS2那样支持自己浮动标签。

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

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

默认样式对选项卡不起作用，但对于药片可以正常工作。

Twitter Bootstrap 3.0 - 标签 - 不再工作了？

3 个答案: