Question

当我打开汉堡菜单时，“退出”按钮会自动进入折叠状态，这是什么问题？

以及如何将汉堡按钮移到右侧？

<header>
  <nav class="navbar navbar-expand-md navbar-toggleable">
    <a href="#" class="navbar-brand"><img src="img/barcode_zebra.png" class="rounded" alt="zebra" width="100" height="50"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="navbar-item"><a href="#" class="nav-link">Главная</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Документы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Библиотека</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Вопросы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Контакты</a></li>
      </ul>
    </div>
    <button class="btn"><i class="fas fa-window-close fa-2x"></i></button>
  </nav>
</header>

Header

Open burger menu

Answer 1

您可以将第二个按钮移动到第一个按钮之后，如下所示：

<header>
  <nav class="navbar navbar-expand-md navbar-toggleable">
    <a href="#" class="navbar-brand"><img src="img/barcode_zebra.png" class="rounded" alt="zebra" width="100" height="50"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="navbar-item"><a href="#" class="nav-link">Главная</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Документы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Библиотека</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Вопросы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Контакты</a></li>
      </ul>
    </div>
    <button class="btn"><i class="fas fa-window-close fa-2x"></i></button>
  </nav>
</header>

工作演示@ https://codepen.io/cfxd/pen/KEmeVL

更新，如果您想保留原始的标记顺序，则只需添加以下CSS：

.navbar-collapse {
  order: 1;
}

Codepen已更新为反映此@ https://codepen.io/cfxd/pen/KEmeVL。

汉堡菜单上的按钮问题（引导程序）

1 个答案: