Bootstrap 4 Navbar 列大小不是 100%

Question

我有一个 BS 4 导航栏，它在桌面上看起来不错，但是当我切换到移动设备时，导航栏内的列并没有填满整个空间，因此宽度不是 100%。下图紫色区域：

当我检查代码时，似乎有这个flex-wrap: wrap; 阻止列宽在移动设备上达到 100%。如果我取消选中并禁用flex-wrap: wrap;，则导航中的项目和加入/应用链接看起来很混乱。

这是什么原因造成的，如何解决？我只想让我的加入/应用按钮达到移动设备大小的 100%。

这是我的 HTML，我不使用自定义 css 代码来更改列或行的默认大小。

<div class="navbar-collapse nav-fill w-100 collapse show" id="collapsing_navbar" style="">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-nav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#explore">Academics</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#rankings">Rankings</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#surrounds">Surrounds</a>
            </li>
          </ul>
        </div>
        <div class="col-sm-6 col-nav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#advantage">Work</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#living-sustainably">Living Sustainably</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#how-we-serve">How We Serve</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="row d-sm-none mobile-nav-show">
        <div class="col">
          <a href="#" class="nav-link visit text-white">Visit</a>
          <a href="#" class="nav-link apply text-white">Apply</a>
        </div>
      </div>
    </div>
</div>

Answer 1

我的猜测是引导类之一有flex-wrap: wrap，你必须使用那种特定的样式。

您可以添加媒体查询，使flex-wrap 仅适用于桌面屏幕尺寸。一种方法是使用媒体查询：

你可以有这样的

@media only screen and (max-width: 480px) {
  .class-that-has-flex-wrap {
    flex-wrap: nowrap;
  }
}

这会将flex-wrap 设置为nowrap，这与flex-wrap: wrap 基本相反。这仅影响小于或等于 480 像素的屏幕尺寸。这个断点对你来说可能不同。