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>

在汉堡包bootstrap4之前添加组件

1 个答案: