将 Bootstrap 导航栏分成两列

Question

我想在导航栏中创建两列。我用 Bootstrap css.

所有按钮现在都排在左侧。我想让最后两个按钮向右排列...这可能吗？我该怎么做？

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" background-color: #eb8d22>
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html"></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">FOOD</a></li>
        <li><a href="#">FOTO'S</a></li>
        <li><a href="#">ARCHIEF</a></li>
        <li><a href="#">PETER</a></li>
        <li><a href="#">VAKANTIEWONING</a></li>
      </ul>
  </div>
</nav>

Answer 1

具有 2 个项目的第二个 <ul> 列表在右侧。 Groet uit regio den haag.

<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #eb8d22;">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarList" aria-expanded="false">
      <span class="sr-only">Toggle menu</span>
      <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My Site</a>
    </div>
    <div class="collapse navbar-collapse" id="navbarList">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">FOOD</a></li>
        <li><a href="#">FOTO'S</a></li>
        <li><a href="#">ARCHIEF</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">PETER</a></li>
        <li><a href="#">VAKANTIEWONING</a></li>
      </ul>
    </div>
  </div>
</nav>

将 Bootstrap 导航栏分成两列

Divide Bootstrap navbar into two columns

css

twitter-bootstrap

twitter-bootstrap-3