Question

在宽屏上显示菜单时，我需要这样：导航栏菜单3菜单2菜单1

菜单切换时我试图改变方向导航栏菜单1 菜单2 菜单3

，不是这样的：导航栏菜单3 菜单2 菜单1

<nav class="navbar navbar-expand-lg navbar-dark indigo">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
    aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Menu3 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu1</a>
      </li>
    </ul>
  </div>
</nav>

知道我该怎么做吗？谢谢

Answer 1

基本上，这个想法是将菜单项显示为反折（即flex-direction: column-reverse;时，将菜单项设置为反折方向。

您可以编写自定义CSS来这样做，但是随后您需要对导航栏扩展/折叠的断点进行硬编码。相反，最好的方法就是在flex-column-reverse flex-lg-row上使用Bootstrap内置类：navbar-nav。

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-lg-0 flex-column-reverse flex-lg-row">
        <li class="nav-item active">
            <a class="nav-link" href="#">Menu3 <span class="sr-only">(current)</span></a>
        </li>

...

那将与您的navbar-expand-lg相匹配，每当您决定更改它时，您只需要记住也要更改flex-lg-row类。

演示： https://jsfiddle.net/davidliang2008/wj7dLrsp/6/

引导程序切换菜单方向

1 个答案: