引導導航欄項目在較小的屏幕上無法正確對齊

Question

我正在使用Bootstrap創建導航欄。 當我在大屏幕上查看頁面時，它可以完美地工作。 但是，當我嘗試縮小到較小的屏幕時，導航欄會變高，並且左側的品牌圖標和名稱以及右側的li項目不在同一行。 我的html或css代碼有什么問題會導致此問題嗎？ 提前非常感謝您。

這是我的HTML代碼：

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <!-- Left side -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            <a class="navbar-brand" href="index.html">
                <span class="logo"><img src="logo_example.png"/></span>
                <h4 class="navbar-text">My Website</h4>
            </a>
        </div>

        <!-- Right side -->
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Sign Up</i></a></li>
                <li><a href="login.html">Login</i></a></li>
            </ul>
        </div>
    </div>
</nav>

這是我的CSS代碼

.navbar-brand {
    margin: 0;
    padding: 0;
    width: 1000px;
}


.navbar-brand img {
    max-height: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}

span img {
    float: left;
}

這是我正在談論的圖像。

Answer 1

您已為.navbar-brand了.navbar-brand的寬度，因此在較小的視口（較小的屏幕）上，該容器占用了其容器太多的寬度，沒有其他元素的空間。 請注意，Bootstrap的.container類是響應式的-在較小的視口上具有較小的寬度。

刪除navbar-brand的width屬性應該可以解決您的問題。

Answer 2

您需要刪除以下CSS：

.navbar-brand {
    width: 1000px;
}

在此處查看演示： http : //codepen.io/sol_b/pen/PbxgXo