html - Bootstrap header 修复

Question

我遇到的困难是我的 navbar-right 元素不会与我的 navbar-brand 部分对齐。我需要帮助。我想对齐它们，但元素会像这样

header.html

<header>
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <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="#">
                        {{ Html::image('assets/images/logo.png') }}
                    </a>
                </div>
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li class=""><a href="#">About Us</a></li>
                </ul>
            </div>


        </div>
    </header>

样式.css

.navbar-text > a {
    color: inherit;
    text-decoration: none;
}
body {
    padding-top: 70px;
    padding-bottom: 100px;
}

.navbar-default{
    background-color:#005b96;
    border-color:#005b96;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    position:absolute;
    top: 25px;
    left:100px;
    right:100px;

}
.navbar-brand {
    width: 100px;
    height: 50px;
}

.navbar-default .navbar-brand > img {
    width: 130px;
    height:50px;
    position: absolute;
    top: 5px;
    padding-top:5px;
    padding-bottom: 5px;
    margin-left: auto;
}

.row{
     position:absolute;
    top: 25px;
    left:115px;
    right:115px;
}
.panel{
    margin-top:100px;
}

Answer 1

Example .问题实际上出在您的标记上。你的 .container 也应该包装

<div class="navbar-collapse collapse">
......
</div>

像这样:

<header>
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <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="#">
            {{ Html::image('assets/images/logo.png') }}
        </a>
      </div>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li class=""><a href="#">About Us</a></li>
        </ul>
      </div>

    </div>
  </div>
</header>