Question

我正在尝试使用一个水平导航栏，其中包含三个大小相等的导航药丸。

当我降低屏幕分辨率（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>

Answer 1

似乎您有许多多余的容器（不需要）-

我删除了容器，并为填充添加了额外的CSS（可以根据需要将其删除/调整）

已更新

我还根据OP的评论将容器的左/右填充（从15px减少到5px），以便为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>

在Bootstrap 4中强制执行单个水平导航

1 个答案: