布局更改时引导导航响应不佳

Question

<div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-brand pull-left">
                <a href="#" class="pull-left">
                    <img width="150" height="45" class="navbar-left" src="Intellicell_files/IntelliCell-Logo.png" /></a>
            </div>
            <button class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse pull-right">
                <ul class="nav navbar-nav navbar-right navbar-text">
                    <li><a id="homeLink" href="#" data-target="home_container">Home</a></li>
                    <li><a id="contractslink" href="Contracts.aspx">Contracts</a></li>
                    <li><a id="accounts" href="AccountHistory.aspx">Account History</a></li>
                    <li><a href="#contact" data-toggle="modal">Contact Us</a></li>
                    <li><a id="refer" href="#">Refer a Friend</a></li>
                    <li><a id="tracker" href="#">Incentive Tracker</a></li>
                </ul>

            </div>
        </div>

        <div class="center-block" id="divider">
            <div class="nav-divider">
                <h4 class="text-center">HOME</h4>
                <%--<asp:Button Text="Logout" CssClass="btn btn-group-sm form-control" ID="btnLogOut" runat="server" align="right" OnClick="btnLogOut_Click"/>--%>
            </div>
        </div>
    </div>

当我在平板电脑上测试导航栏时问题出现了，这导致导航栏位于我放在那里的徽标下方，所以我想知道是否有办法确保导航徽标和导航选项总是在同一条线上。顺便说一句，我正在使用引导程序

Answer 1

一种选择是减少链接之间的填充。

另外，请参阅有关如何构建默认 navbar 的文档。

.navbar .navbar-brand {
  padding-top: 3px;
}
@media (min-width: 768px) {
  .navbar .navbar-nav > li > a {
    padding-left: 8px;
    padding-right: 8px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img width="150" height="45" src="http://placehold.it/150x45/f00" />
      </a>

    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a id="homeLink" href="#" data-target="home_container">Home</a>

        </li>
        <li><a id="contractslink" href="Contracts.aspx">Contracts</a>

        </li>
        <li><a id="accounts" href="AccountHistory.aspx">Account History</a>

        </li>
        <li><a href="#contact" data-toggle="modal">Contact Us</a>

        </li>
        <li><a id="refer" href="#">Refer a Friend</a>

        </li>
        <li><a id="tracker" href="#">Incentive Tracker</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

<div class="navbar navbar-default navbar-static-top">
        <div class="container">

            <button class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <div class="navbar-brand">
                <a href="#">
                    <img height="45" class="navbar-left" src="http://i.ytimg.com/vi/PDfWeUP09TA/hqdefault.jpg" /></a>
            </div>
                <ul class="nav navbar-nav navbar-right navbar-text">
                    <li><a id="homeLink" href="#" data-target="home_container">Home</a></li>
                    <li><a id="contractslink" href="Contracts.aspx">Contracts</a></li>
                    <li><a id="accounts" href="AccountHistory.aspx">Account History</a></li>
                    <li><a href="#contact" data-toggle="modal">Contact Us</a></li>
                    <li><a id="refer" href="#">Refer a Friend</a></li>
                    <li><a id="tracker" href="#">Incentive Tracker</a></li>
                </ul>

            </div>
        </div>

        <div class="center-block" id="divider">
            <div class="nav-divider">
                <h4 class="text-center">HOME</h4>
                <%--<asp:Button Text="Logout" CssClass="btn btn-group-sm form-control" ID="btnLogOut" runat="server" align="right" OnClick="btnLogOut_Click"/>--%>
            </div>
        </div>
    </div>


ul li a{
    padding-left: 10px !important;
    padding-right: 10px !important;
}

我不是前端，但它应该会有所帮助:)

我用 div 包装了 img 和 ul，并通过较小的填充让 img 与菜单一起排。 它只是一个建议，问题是，ul li a 太大了，把 img 推上去