CSS Bootstrap 水平滚动标签栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22582520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap horizontal scrollable tab bar
提问by Trevor Orr
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.
我正在 Bootstrap 3 中创建一个带有标签栏的应用程序。我正在动态添加和删除选项卡。这一切都很好，但我想要做的是让标签栏在标签中水平滚动，如果有太多标签无法适应应用程序的宽度，而不是创建多行或标签。
Has anyone done this or have an idea how to implement this?
有没有人做过这个或者知道如何实现这个？
回答by BENARD Patrick
Here is an example:
下面是一个例子：
(Not working in snippet for some reason, so here is a link to Bootply: http://www.bootply.com/oROUAMwsG1)
（由于某种原因不能在片段中工作，所以这里是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>