我尝试使用 Bootstrap 4 中的 nav-tabs
,当它有太多元素时,我想让它可以滚动。
首先,默认行为是将元素移动到下一行。我用 white-space: nowrap
和 flex-wrap: nowrap
解决了这个问题。
而且我意识到即使有一个禁用的滚动条,容器也会沿 x 轴扩展。我试图通过提供 max-width: 100%
来修复它,但它不起作用。我发现使用特定的 px 值可以使它工作,但对我来说这不是一个好的解决方案。
HTML:
<ul class="nav nav-tabs">
<li class="nav-item px-1">
<a class="nav-link active">Active Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
</ul>
CSS:
.nav {
white-space: nowrap;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch
}
.nav li {
display: inline-block
}
最佳答案
使用display:block!important;
.nav
代替 display:flex
.nav {
white-space: nowrap;
display:block!important;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch
}
.nav li {
display: inline-block
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item px-1">
<a class="nav-link active">Active Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link active">Active Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link active">Active Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">Tab</a>
</li>
</ul>
关于html - nav-tabs 不滚动 overflow-x : scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50577245/