html - Bootstrap 导航栏响应 Logo

Question

我的 Bootstrap 页面上的 Logo 有这个问题，我正在尽最大努力使导航栏上的 Logo 保持在导航栏的中心，并在缩小窗口时保持响应，但导航栏文本消失了当我缩小窗口时在图像后面，当我单击显示的下拉按钮时，我的 Logo 只停留在页面顶部。我需要它随着下拉效果移动并保持粘在导航栏的底部，这是我的 Bootstrap 代码:

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

这是我的 Logo 的 CSS:

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

如果你发现了什么，请通知我，我将不胜感激!

Answer 1

您不应该使用绝对位置。如果这样做，您将不得不使用 window.resize 事件自行控制行为。

如果你想把logo放在底部，就把它放在底部，不要绝对位置。

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