Bootstrap導航欄響應徽標

Question

我在引導程序頁面上有徽標問題，我正在盡力使導航欄上的徽標保持在導航欄的中心，並在縮小窗口時保持響應，但導航欄文本位於圖像后面當我縮小窗口時，當我單擊顯示的下拉按鈕時，我的徽標就停留在頁面頂部。我需要它隨下拉效果一起移動並固定在導航欄的底部，這是我的引導代碼：

<div class="navbar navbar-default navbar-static-top" id="main">
    <div class="container">
    <img src="images/LogoTango2.png" alt="tango" class="logo">
    <div class="navbar-header">
        <a href="index.html" class="navbar-brand">начало</a>

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button></div>

        <div class="collapse navbar-collapse navHeaderCollapse" id="right">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="zakuski.html">цех за закуски</a></li>
                <li><a href="opakovka.html">опаковка</a></li>
                <li><a href="gostilnica.html" id="gostilnica">гостилница</a></li>
                <li><a href="contact.html">контакт</a></li>
            </ul>
        </div>
    </div>
</div>

這就是我的徽標CSS：

.logo {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    left: 0;
    right: 0;
    z-index: 2;
}

如果您發現任何問題，請通知我，我將非常感激！

Answer 1

您不應該使用絕對位置。 如果這樣做，則必須使用window.resize事件自行控制行為。

如果要在徽標底部放置徽標，則將其放在底部而沒有絕對位置。

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

<div class="navbar-header">
    <a href="index.html" class="navbar-brand">начало</a>

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button></div>

    <div class="collapse navbar-collapse navHeaderCollapse" id="right">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="zakuski.html">цех за закуски</a></li>
            <li><a href="opakovka.html">опаковка</a></li>
            <li><a href="gostilnica.html" id="gostilnica">гостилница</a></li>
            <li><a href="contact.html">контакт</a></li>
        </ul>
    </div>
    <img src="images/LogoTango2.png" alt="tango" class="logo">
</div>
</div>

.logo {

margin-left: auto;
margin-right: auto;
z-index: 2;
}