我在网上找到了很多其他引导版本的例子，但是我找不到任何东西可以使导航标签在引导3中水平滚动。
我试过很多css，通过设置nav的容器为block和其他东西，但什么都没有…
下面是我的导航标签:
null
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<nav class="wrapper">
<ul class="nav nav-tabs">
<li class="nav-item active" role="presentation"><a href="#001" aria-controls="001" role="tab">EDENRED</a></li>
<li class="nav-item" role="presentation"><a href="#002" aria-controls="002" role="tab">DAY</a></li>
<li class="nav-item" role="presentation"><a href="#003" aria-controls="003" role="tab">SODEXO</a></li>
<li class="nav-item" role="presentation"><a href="#004" aria-controls="004" role="tab">GRUPPO PELLEGRINI</a></li>
<li class="nav-item" role="presentation"><a href="#005" aria-controls="005" role="tab">COMPASS GROUP - RISTOMAT</a></li>
<li class="nav-item" role="presentation"><a href="#006" aria-controls="006" role="tab">QUI</a></li>
<li class="nav-item" role="presentation"><a href="#007" aria-controls="007" role="tab">CIR BLUTICKET</a></li>
<li class="nav-item" role="presentation"><a href="#008" aria-controls="008" role="tab">JAKALA</a></li>
<li class="nav-item" role="presentation"><a href="#009" aria-controls="009" role="tab">MIG FOR YOU</a></li>
<li class="nav-item" role="presentation"><a href="#010" aria-controls="010" role="tab">SODEXO GIFT</a></li>
</ul>
</nav>null
当项目不适合屏幕时，我如何使它水平滚动而不是进入换行？
null
ul {
display: flex;
flex-direction: row;
}
.nav-tabs > li > a {
height: 100%;
}
/** Optionally if you don't want word wrap **/
.nav-tabs > li {
white-space: nowrap;
}
.headerContainer {
width: fit-content;
}<!-- Latest compiled and minified CSS -->
<div class="headerContainer">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<nav class="wrapper">
<ul class="nav nav-tabs">
<li class="nav-item active" role="presentation"><a href="#001" aria-controls="001" role="tab">EDENRED</a></li>
<li class="nav-item" role="presentation"><a href="#002" aria-controls="002" role="tab">DAY</a></li>
<li class="nav-item" role="presentation"><a href="#003" aria-controls="003" role="tab">SODEXO</a></li>
<li class="nav-item" role="presentation"><a href="#004" aria-controls="004" role="tab">GRUPPO PELLEGRINI</a></li>
<li class="nav-item" role="presentation"><a href="#005" aria-controls="005" role="tab">COMPASS GROUP - RISTOMAT</a></li>
<li class="nav-item" role="presentation"><a href="#006" aria-controls="006" role="tab">QUI</a></li>
<li class="nav-item" role="presentation"><a href="#007" aria-controls="007" role="tab">CIR BLUTICKET</a></li>
<li class="nav-item" role="presentation"><a href="#008" aria-controls="008" role="tab">JAKALA</a></li>
<li class="nav-item" role="presentation"><a href="#009" aria-controls="009" role="tab">MIG FOR YOU</a></li>
<li class="nav-item" role="presentation"><a href="#010" aria-controls="010" role="tab">SODEXO GIFT</a></li>
</ul>
</nav></div>
由于您希望在X轴上添加滚动，因此只需将以下内容添加到style.css文件中:
ul {
display: flex;
flex-direction: row;
overflow-x: scroll;
}
但是，在我看来，这是一件非常不寻常的事情。
