Question

当我添加标签超过标签容器宽度时，我希望它左右水平滚动，但不像这个示例：http://www.eyecon.ro/bootstrap-tabdrop/ 和thnx。

Answer 1

如果您使用Google“可滚动引导选项卡”，那么有一些解决方案。或者，您可以将选项卡包装在两个DIV中，如下所示：

<div class="wrapper">
  <div class="scrollable">
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#tab_a" role="tab" data-toggle="tab">Tab A</a></li>
        <li><a href="#tab_b" role="tab" data-toggle="tab">Tab B</a></li>
        <li><a href="#tab_c" role="tab" data-toggle="tab">Tab C</a></li>
        <li><a href="#tab_d" role="tab" data-toggle="tab">Tab D</a></li>
        <li><a href="#tab_e" role="tab" data-toggle="tab">Tab E</a></li>
        <li><a href="#tab_f" role="tab" data-toggle="tab">Tab F</a></li>
        <li><a href="#tab_g" role="tab" data-toggle="tab">Tab G</a></li>
        <li><a href="#tab_h" role="tab" data-toggle="tab">Tab H</a></li>
    </ul>
  </div>
</div>

然后添加以下CSS：

.scrollable {
  width: 600px;
}

.wrapper    {
  width: 400px;
  overflow-x: scroll;
}

由于这是非常快速和肮脏的，你可能想要添加更多jQuery和CSS来替换滚动条，用左右滚动标签的按钮，并确保两个DIV的宽度不是硬编码的。

Answer 2

直接javascript：

this.$('.nav-tabs').tabdrop();

使用

调用tabdrop：

.tabdrop();

使用选项调用tabdrop：

.tabdrop(options);

选项文本

输入：string

默认：图标

<i class="icon-align-justify"></i>

要更改默认值，请致电

.tabdrop({text: "your text here"});

将tabdrop初始化。从下拉列表中选择选项卡时，显示的值将更改。的offsetTop

类型：整数

默认值：0

要更改默认值，请致电

.tabdrop({offsetTop: N});

将tabdrop初始化。这确定了何时必须在制表符中包含制表符。方法布局

检查标签是否全部放在一行中，并在列表中显示活动标签的文本：

.tabdrop('layout');

如何使标签不会溢出标签容器？

2 个答案: