html - 在 Bootstrap 4 中强制使用单个水平导航

标签 html css bootstrap-4

我正在尝试拥有一个水平导航栏,其中包含三个大小相同的导航栏。

当我下降到较小的屏幕分辨率(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 分辨率的药丸腾出空间 - 见下图

enter image description here

看下面的演示

/* 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/

相关文章:

css - 在 jQuery Mobile 中为列表屏幕生成渐变效果?

twitter-bootstrap - 在 .d-flex 容器 Bootstrap 中使用 .col-* 4

css - ml-auto 没有将导航栏链接推向右侧

css - Material Design - Bootstrap 输入字段问题

html - 如何在 WordPress 中显示特定帖子的标签

c# - ASP.net MVC - 在模型中处理 HTML 数据

html - 表格列的宽度不一样?

javascript - 对同一页面上的多个 html 表单重用 JavaScript 脚本

css - 将 <figcaption> 缩小到兄弟 <img> 并保持响应

php - 为 If/else php 插入内联 css/样式