我正在尝试拥有一个水平导航栏,其中包含三个大小相同的导航栏。
当我下降到较小的屏幕分辨率(iphone 5)时,第三项总是下降到一个新行,并增长到全宽。
如何为所有合理的分辨率实现单行水平布局?
当我将 py-1 类设置为 py-0 时它确实有效,但我喜欢额外填充的外观。
<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>
最佳答案
看起来你有一些额外的容器(你不需要)-
我删除了容器并为填充添加了额外的 CSS(如果你愿意,你可以删除它/调整它)
已更新
我还减少了容器的左/右填充(从 15px 到 5px),以便根据 OP 的评论为 iPhone 5/SE 分辨率的药丸腾出空间 - 见下图
看下面的演示
/* this gives you extra padding on the right-left of each menu item */
.nav-pills li.nav-item {
padding: 0 2px;
}
.container-fluid {
padding-right: 5px !important;
padding-left: 5px !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item">
<a class="nav-link active" href="https://example.com/home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://example.com/meetings">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://example.com/courses">Courses</a>
</li>
</ul>
</div>
关于html - 在 Bootstrap 4 中强制使用单个水平导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54656164/