Bootstrap navbar отзывчивый Logo

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.

Если вы хотите, чтобы логотип у buttom, то положите его в нижнюю часть без абсолютной позиции.

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