如何使导航标签在引导程序3中水平滚动

Question

我在网上找到了很多其他引导程序版本的例子，但我找不到任何东西可以让导航选项卡在引导程序3中水平滚动…

我已经尝试了很多css，将nav的容器设置为block和其他东西，但什么都没有。。

这是我的导航标签：

<!-- 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>

当项目不适合屏幕时，我如何使其水平滚动而不是换行？

Answer 1

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>

Answer 2

由于您想在X轴上添加滚动，您只需要在style.css文件中添加以下内容：

ul {
display: flex;
flex-direction: row;
overflow-x: scroll;
}

但是，在我看来，这是一件非常不寻常的事情