bootstrap 移动端开发时，需要实现 tab 页切换，也就是，通过对 nav nav-tabs 设置，实现，可以横向滑动。这里介绍2种方法。第一种，通过 CSS 样式
<style>
.nav-tabs {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.nav-tabs > li {
display: inline-block;
float: none;
}
</style>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
<li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
<li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
<li><a data-toggle="tab" href="#menu4">菜单 4</a></li>
<li><a data-toggle="tab" href="#menu5">菜单 5</a></li>
<li><a data-toggle="tab" href="#menu6">菜单 6</a></li>
<li><a data-toggle="tab" href="#menu7">菜单 7</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
首页
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>这是菜单 1 显示的内容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 2</h3>
<p>这是菜单 2 显示的内容。</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>菜单 3</h3>
<p>这是菜单 3 显示的内容。</p>
</div>
<div id="menu4" class="tab-pane fade">
<h3>菜单 4</h3>
<p>这是菜单 4 显示的内容。</p>
</div>
<div id="menu5" class="tab-pane fade">
<h3>菜单 5</h3>
<p>这是菜单 5 显示的内容。</p>
</div>
<div id="menu6" class="tab-pane fade">
<h3>菜单 6</h3>
<p>这是菜单 6 显示的内容。</p>
</div>
<div id="menu7" class="tab-pane fade">
<h3>菜单 7</h3>
<p>这是菜单 7 显示的内容。</p>
</div>
</div>
</div>第二种，通过 jquery，在 nav-tabs 的外部加层 div ，class 设置为 overflow-x:scroll
<div class="container">
<div style="overflow-x:scroll">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
<li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
<li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
<li><a data-toggle="tab" href="#menu4">菜单 4</a></li>
<li><a data-toggle="tab" href="#menu5">菜单 5</a></li>
<li><a data-toggle="tab" href="#menu6">菜单 6</a></li>
<li><a data-toggle="tab" href="#menu7">菜单 7</a></li>
</ul>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
首页
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>这是菜单 1 显示的内容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 2</h3>
<p>这是菜单 2 显示的内容。</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>菜单 3</h3>
<p>这是菜单 3 显示的内容。</p>
</div>
<div id="menu4" class="tab-pane fade">
<h3>菜单 4</h3>
<p>这是菜单 4 显示的内容。</p>
</div>
<div id="menu5" class="tab-pane fade">
<h3>菜单 5</h3>
<p>这是菜单 5 显示的内容。</p>
</div>
<div id="menu6" class="tab-pane fade">
<h3>菜单 6</h3>
<p>这是菜单 6 显示的内容。</p>
</div>
<div id="menu7" class="tab-pane fade">
<h3>菜单 7</h3>
<p>这是菜单 7 显示的内容。</p>
</div>
</div>
</div>
<script>
$(function () {
const tabs = $('.nav-tabs');
// ul 下的 li
const lis = $('.nav-tabs > li');
// 开始的宽度设置为 10
let width = 10;
// 遍历 li
lis.each(function (index, el) {
width += $(el).width();
});
tabs.css('width', width);
});
</script>参考来源：