Bootstrap 4 Navbar 列大小不是 100%

Posted 2023-03-21

【中文标题】Bootstrap 4 Navbar 列大小不是 100%

【英文标题】：Bootstrap 4 Navbar column size is not 100%

【发布时间】：2021-10-07 10:34:16

【问题描述】：

我有一个 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>

【参考方案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 像素的屏幕尺寸。这个断点对你来说可能不同。

【讨论】：

我试过了。它是 .navbar > .container 并将其设置为 nowrap 会混淆导航项目和底部的访问/应用按钮。

你有什么额外的css吗？我尝试使用引导 CDN 运行 HTML，但无法在此处复制它jsbin.com/gutigisico/2/edit?html,output你能分享一下小提琴吗？