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>

当我在平板电脑上测试导航栏并导致导航栏放在我放在那里的徽标下时出现问题，所以我想知道是否有办法确保导航徽标和导航选项总是在同一条线上。我顺便使用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>

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 up

布局更改时，bootsrap nav响应不佳

2 个答案: