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

Question

我已经在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>

在台式机上看起来很棒（除了颜色，我稍后会解决），但是在移动设备上，它们会堆叠在一起，甚至不能直接堆叠在一起。不确定为什么它会像这样自动移动到顶部：

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

Answer 1

您需要在ul类中添加“ flex-row align-items-center”，并从最后一个按钮类中删除“ float-right”。这些是引导程序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>

Answer 2

我建议您不要在按钮上使用float，而是尽量保持一致，并在这些按钮上使用内联显示。无论如何，我不知道您的样式如何布局，因此，在不更改任何其他类的情况下，为您找到的最简单的解决方案是将其添加到您的CSS中：

@media (max-width: 768px) {
  .navbar-nav {
    flex-direction: row;
  }
}

这将迫使您的元素保持水平放置，即使在较小的分辨率下，Bootstrap也会假设您不再希望将它们保持在同一行中。