如何将所有项目放在导航栏中，并保持响应式设计？

Question

如何布置网格布局以使导航栏中的所有项目都排成一排，菜单项在左侧，而某些链接（在此示例中，只是一个按钮）在右侧？

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header col-lg-12 alert-danger">
      <div class="row">
        <div class="col-lg-10 alert-info">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="/">MyStore</a>
        </div>
        <div class="col-lg-2 navbar-collapse collapse" align="right">
          <div class="col-lg-10">
            <ul class="nav navbar-nav alert-success">
              <li><a href="/Products">Admin</a></li>
            </ul>
          </div>
          <div class="col-lg-2 alert-success">
            <a href="/Cart" class="btn btn-success">
              <span class="glyphicon glyphicon-shopping-cart">
              </span>
              Kr 514,00
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

我为div添加了颜色，以便能够更好地查看它们。 格式化完成后，它们都应该是一种颜色。

我正在使用未更改的bootstrap.css：

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">

对我来说，网格布局在标记中看起来是正确的，但是呈现的结果只是一团糟：

编辑

我通过调整col-lg-*解决了一部分问题。 现在，我只需要一直将按钮一直向右按下一点，以将导航栏内的所有内容垂直对齐：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header col-lg-12">
      <div class="row">
        <div class="col-lg-1">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="/">MyStore</a>
        </div>
        <div class="col-lg-11 navbar-collapse collapse" align="right">
          <div class="row">
            <div class="col-lg-9">
              <ul class="nav navbar-nav">
                <li><a href="/Products">Admin</a></li>
              </ul>
            </div>
            <div class="col-lg-3" align="right">
              <a href="/Cart" class="btn btn-success">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                Kr 514,00
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Answer 1

如果您打算将Bootstrap的导航栏与标题和导航项一起使用，则它们必须具有以下标记：

<div class="navbar">
  <div class="navbar-header">
  </div>
  <div class="nav navbar-nav">  <!--elements inside will be horizontal-->
  </div>
</div>

-

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header col-lg-12 alert-danger">
      <div class="col-lg-10 alert-info">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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="/">MyStore</a>
      </div>
    </div>
    <div class="nav navbar-nav">
      <div class="col-lg-2 navbar-collapse collapse" align="right">
        <div class="col-lg-10">
          <ul class="nav navbar-nav alert-success">
            <li><a href="/Products">Admin</a></li>
            <li><a href="/Products">Another</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="nav navbar-nav">
      <a href="/Cart" class="btn btn-success">
        <span class="glyphicon glyphicon-shopping-cart">
        </span>Kr 514,00
      </a>
    </div>
  </div>
</nav>

更多信息在这里

Answer 2

row div内添加内部级别代码，以使其正确对齐。

  <div class="col-lg-2 navbar-collapse collapse" align="right">
       <div class="row"> <!-- should need for proper alignment -->
                <div class="col-lg-10">
                    <ul class="nav navbar-nav alert-success">
                        <li><a href="/Products">Admin</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 alert-success">
                    <a href="/Cart" class="btn btn-success"><span class="glyphicon glyphicon-shopping-cart"></span> Kr 514,00</a>
                </div>
       </div>
   </div>