I tried to use nav-tabs
from Bootstrap 4, and when it has too many items, I wanted to make it scrollable.
First, the default behavior is moving items to next line. I fixed this with white-space: nowrap
and flex-wrap: nowrap
.
And I realized that the container is expanding along x axis even there's an disabled scrollbar. I tried to fix it with giving max-width: 100%
, but it's not working. I found that using specific px value makes it work, but it's not a good solution for me.
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
}
Use display:block!important;
to .nav
instead 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With