【问题标题】:Twitter Bootsrap 3.0 - tabs-left not working anymore?Twitter Bootsrap 3.0 - tabs-left 不再工作了?
【发布时间】:2013-08-27 00:39:06
【问题描述】:

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

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

感谢您的帮助!

【问题讨论】:

标签: html twitter-bootstrap


【解决方案1】:

不幸的是,当我也使用它们时,似乎所有 non-default tab alignments 在 3.0 中都已被删除,没有等效项。

直接从上面的链接复制,所有三个标签对齐方式都从 3.0 中删除:

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

【讨论】:

    【解决方案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">
    

    【讨论】:

      【解决方案3】:

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

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

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

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-08-21
        • 2016-05-10
        • 1970-01-01
        相关资源
        最近更新 更多