时间戳

首页 > 解决方案 > Bootstrap Navbar 按钮在移动设备中堆叠

javascript - Bootstrap Navbar 按钮在移动设备中堆叠

问题描述

我在我的 Bootstrap 导航栏中添加了按钮，如下所示：

<!-- Image and text -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="https://www.seekadventure.net">
    <img src="myLogo.png" width="155.66" height="50" class="d-inline-block align-top" alt="">
  </a>

  <ul class="navbar-nav ml-auto">
    <!-- Button trigger modal -->
    <li class="nav-item" style="padding-right:25px ">
      <button  class="btn btn-warning" onclick="locateMe()">
        <i class="fas fa-street-view"> </i>
      </button>
    </li>

    <li class="nav-item">
    </li>

    <li class="nav-item">
      <button type="button" class="btn btn-warning float-right" data-toggle="modal" data-target="#exampleModal">
        <i class="fas fa-filter"></i>
      </button>
    </li>
  </ul>
</nav>

它在桌面上看起来很棒（除了颜色，但我稍后会修复它）但在移动设备上，它们会堆叠在一起，甚至不会直接堆叠在一起。不知道为什么它会像这样自动移动到顶部：

在此处输入图像描述

如何强制这两个图标彼此相邻？应该有足够的空间来放置不必在移动设备中堆叠的按钮。

标签： javascriptcssbootstrap-4

解决方案

您需要在 ul 类中添加“flex-row align-items-center”，并从最后一个按钮类中删除“float-right”。这些是 bootstrap 4 的预定义类，因此无需为此编写额外的 CSS。这将显示与您的桌面视图相同的结果。

 <ul class="navbar-nav ml-auto flex-row align-items-center">
    <!-- Button trigger modal -->
    <li class="nav-item">
      <button class="btn btn-warning" onclick="locateMe()">
        <i class="fas fa-street-view"> </i>
      </button>
    </li>
    <li class="nav-item">
      <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal">
        <i class="fas fa-filter"></i>
      </button>
    </li>
  </ul>

推荐阅读