asp.net - Bootstrap 导航在布局更改时响应不佳

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>

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

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>