Question

如何安排我的网格布局以获取导航栏中所有项目的一行，左边是菜单项，右边是一些链接（或者在这个例子中，只有一个按钮）？ / p>

<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>

更多信息here

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>

如何在导航栏中的一行中获取所有项目，并保持响应式设计？

2 个答案: