Bootstrap Navbar Снимок бренда упал после краха

Мое изображение бренда навигатора нажимается, когда я изменяю размер экрана, чтобы имитировать мобильный. Как я могу использовать медиа-запросы для изменения размера заголовка navbar (так как я думаю, что это тот, который не изменяет размер и не приводит к снижению имиджа бренда)?Bootstrap Navbar Снимок бренда упал после краха

<div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"style="margin-top:27px;"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" style=""> 
      <%=image_tag "elem_logo-white.png", :style => "width: 95%;"%> 
      </a> 
    </div>

Я сделал эту строку кода, однако он не работает. Изображение уменьшилось, однако навигация все еще фрагментирована. @media (max-width: 768px) { .navbar-brand img { ширина: 100px! Important; }}

источник

2016-02-25 Acrux

Я решил, отредактировав предложение Питера Уилсона. Вот что работал:

@media (max-width:768px){ 
     .navbar-brand{ 
     width:70vw!important; 
     } 
    }

источник

2016-02-25 16:28:54 Acrux

Вы должны дать ему меньшую ширину, на маленьких экранах, как

@media (max-width:768px){ 
.navbar-brand img{ 
    width:100px; 
    max-height:50px; 
} 
}

источник

2016-02-25 16:14:32

Я пробовал это, но он не работал :(Я загрузил результат. – Acrux

bootstrap nav bar имеет высоту 50 пикселей; попробуйте что-то вроде этого .navbar-brand img { max-height: 50px; } и он должен работать, если нет, разместите действующий код html, чтобы мы могли отлаживать его для вас –

Я использую большой логотип и использовать следующий код и CSS для шахты:

style.css

.logo-img { 
    max-width: 200px; 
    margin-top: -10px; 
}

header.html

<nav class="navbar navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#/"><img class="logo-img" src="PATH_TO_YOUR_IMAGE"></a> 
    </div> 
    </div> 
</nav>

Где PATH_TO_YOUR_IMAGE является изображением

источник

2016-02-25 16:29:53 BinaryWasteland

Bootstrap Navbar Снимок бренда упал после краха

ответ

Смежные вопросы