如何阻止Bootstrap Navbar在菜单顶部堆叠品牌？

Question

我已经定制了一个基本的Bootstrap导航栏 - 关于我真正用于项目的所有内容，以及在缩小时不会崩溃。但是，每当菜单放入较小的窗口时，它似乎将品牌置于菜单本身的顶部。

有足够的空间可以不用担心实际的菜单，所以我想弄清楚如何阻止它这样做 - 这是相关的脚本：

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
    <a class="navbar-brand" href="#">Project</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
                </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
    </div><!--/.nav-collapse -->
</div><!--/.container-fluid -->

我现在应用了CSS：

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

.container-fluid {
    width: 80%;
    margin: auto;
}

Answer 1

您的<div class="navbar-header">只是一个块，只需将<a class="navbar-brand" href="#">Project</a>移动到导航栏中。

.navbar-brand {
  margin-top: 3px;
  margin-right: 15px;
}

＆＃13;

＆＃13;

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li,
.navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right !important;
}

.container-fluid {
  width: 90%;
  margin: auto;
}

.navbar-brand {
  margin-top: 2px;
  margin-right: 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div id="navbar" class="navbar-collapse collapse">
      <a class="navbar-brand" href="#">Project</a>
      <ul class="nav navbar-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

在html中的<div class="container-fluid">下方添加以下标记。

<a class="navbar-brand" href="#">Project</a>

下面是相同的工作小提琴

<强> Responsive navigation with bootstrap