html - 在 hamburger bootstrap4 之前添加组件

Question

我在 Bootstrap 4 中有一个导航栏:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="row">
  <div class="w-100">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand" href="#">
        <img src="../img/svg/stopa-logo.svg" width="120">
      </a>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav menu-margined-right">
          <li class="nav-item">
            <a class="nav-link" href="#">Missions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">We Support</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      <ul class="nav navbar-nav lang-right">
        <li class="nav-link">
          <a class="nav-item" href="#">CZ</a>
        </li>
        <li class="nav-link">
          <a class="nav-item" href="#">EN</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

我想让语言切换链接位于“MENU”汉堡之前，这可能吗？: LINK

有什么办法可以做到吗？我一直无法找到解决方案。

Answer 1

• 制作 ul absolute 并将其放置在 top 和 right 坐标下。
• 将 ul 和 li 都设置为 inline-block。

示例如下:

ul.nav.navbar-nav.lang-right {
  position: absolute;
  right: 160px;
  top: 7px;
  display: inline-block;
}
li.nav-link {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<header class="row">
  <div class="w-100">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand" href="#">
        <img src="../img/svg/stopa-logo.svg" width="120">
      </a>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav menu-margined-right">
          <li class="nav-item">
            <a class="nav-link" href="#">Missions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">We Support</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      <ul class="nav navbar-nav lang-right">
        <li class="nav-link">
          <a class="nav-item" href="#">CZ</a>
        </li>
        <li class="nav-link">
          <a class="nav-item" href="#">EN</a>
        </li>
      </ul>
    </nav>
  </div>
</header>