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 像素的屏幕尺寸。这个断点对你来说可能会有所不同。

Bootstrap 4 Navbar 列大小不是 100%

1 个答案: