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;
}