I am trying to create a horizontal navbar with three nav-pills that are all the same size.
However, when I switch to a smaller screen resolution (iPhone 5), the third item always moves to a new line and expands to full width.
How can I make sure that the layout remains in a single line for all reasonable resolutions?
I did manage to achieve it by changing py-1 class to py-0, but I prefer the look of additional padding.
<div class="container-fluid">
<section class="container py-1">
<div class="row">
<div class="col-md-12 align-content-center">
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/home">Home</a>
</li>
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/meetings">Meetings</a>
</li>
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/courses">Courses</a>
</li>
</ul>
</div>
</div>
</section>
</div>