Как заставить логотип в Bootstrap быть адаптивным?

Question

[alexStartsev]

Верстаю сайт с адаптивным дизайном. Использую Bootstrap. Есть следующий код. CSS стандартный для Bootstrap 3.

<nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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 src="img/logo.png" class="img-responsive" alt="Blockchain"></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search"></i>
                    </div>
                </form>
</div>
</div>

При уменьшении размера экрана до 332 пикселей логотип перепрыгивает на второй ряд. А я хочу, чтобы он уменьшался в размерах (сжимался).

Добавил класс img-responsive. Но логотип всё еще перепрыгивает на следующий ряд. Я так понимаю, что нужно заключить логотип в родительский элемент. А какие классы и свойства задать этому div (родительский элемент) ?

Comments

[Сергей]

Может проблема в navbar-brand ? возможно там ширина или отступы какие-то заданы

[alexStartsev]

Сергей: float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;

Answer 1

[Глеб Кемарский]

Попробуйте добавить

@media (max-width: 480px) {
  .navbar-brand {
    float: none;
    display: block;
    overflow: hidden;
  }
}

Comments

[alexStartsev]

Да! Спасибо

Answer 2

[msena]

.img-responsive что у Вас тут? Напишите.

Comments

[alexStartsev]

display: block;
max-width: 100%;
height: auto;

Answer 3

[sergey]

<div><a class="navbar-brand" href="#"><img src="img/logo.png" class="img-responsive" alt="Blockchain"></a></div>

меня вот это смутило, где вы такое взяли? в bootstrap это пишется

<a class="navbar-brand" href="#"><img src="img/logo.png" class="img-responsive" alt="Blockchain"></a>

Comments

[alexStartsev]

Да это я обертку начал делать, забыл убрать :) Убрал, изменений нет