Bootstrap 水平滚动标签栏 [英] Bootstrap horizontal scrollable tab bar

查看：20
本文介绍了Bootstrap 水平滚动标签栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在 Bootstrap 3 中创建一个带有标签栏的应用程序.我正在动态添加和删除选项卡.这一切都很好，但我想要做的是让标签栏可以在标签中水平滚动，如果标签太多无法适应应用程序的宽度，而不是创建多行或标签.

有没有人做过这个或者知道如何实现这个?

解决方案

这是一个例子:

(由于某种原因在代码段中不起作用，所以这里是 Bootply 的链接:http://www.bootply.com/oROUAMwsG1)

.nav-tabs {溢出-x:自动；溢出-y:隐藏；显示:-webkit-box；显示:-moz-box；}.nav-tabs>li {浮动:无；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><div class="容器"><div class="col-md-4"><div class="tabbable"><ul class="nav nav-tabs"><li class="active"><a href="#tab1" data-toggle="tab">第 1 节</a><li><a href="#tab2" data-toggle="tab">第 2 节</a><li><a href="#tab2" data-toggle="tab">第 3 节</a><li><a href="#tab2" data-toggle="tab">第 4 节</a><li><a href="#tab2" data-toggle="tab">第 5 节</a><li><a href="#tab2" data-toggle="tab">第 6 节</a><li><a href="#tab2" data-toggle="tab">第 7 节</a><div class="tab-content"><div class="tab-pane active" id="tab1"><p>我在第 1 部分.</p>

<div class="tab-pane" id="tab2"><p>我在第 2 节.</p>

I am creating an app in Bootstrap 3 with a tab bar. I am dynamically adding and removing tabs. This all works great, what I would like to do though is to have the tab bar be horizontally scrollable through the tabs if there are too many tabs to fit in the width of the app instead of creating multiple rows or tabs.

Has anyone done this or have an idea how to implement this?

解决方案

Here is an example:

(Not working in snippet for some reason, so here is a link to Bootply : http://www.bootply.com/oROUAMwsG1)

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
}
.nav-tabs>li {
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-4">
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 3</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 4</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 5</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 6</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 7</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>I'm in Section 2.</p>
        </div>
      </div>
    </div>
  </div>
</div>

这篇关于Bootstrap 水平滚动标签栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆