Bootstrap полностью реагирует на навигацию с логотипом или текстом бренда

Ответ 1

Если вы хотите достичь этого (вы можете изменить размер окна, чтобы посмотреть, как он будет искать мобильную версию), вам нужно всего лишь сделать 2 логотипа изображения (1 для рабочего стола и один для мобильных устройств) и отображать их в зависимости от среды с помощью классов visible-xs и hidden-xs.

Итак, я использовал что-то вроде этого:

<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt=""> 

И, конечно же, я создал мобильный логотип, используя:

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand img {
        margin-top: 5px;
        margin-left: 5px;
    }
}

Здесь вы можете увидеть весь код . Если вам нужен текст на мобильной версии, установленный на логотипе, это не имеет большого значения. Просто замените логотип <h1 class="visible-xs">AppName</h3> и измените стиль внутри медиа-запроса следующим образом:

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand h1{
        //here add your style depending of the position you want the text to be placed
    }
} 

EDIT:

Вам нужны эти условия, чтобы они работали:

.navbar-toggle {
   margin: 23px 0; 
}

.navbar-nav, .navbar-nav li, .navbar-nav li a {
  height: 80px;
  line-height: 80px;
}

.navbar-nav li a {
  padding-top: 0;
  padding-bottom:0;
}

Ответ 2

Лучший подход для добавления логотипа бренда в класс navbar-inner и контейнер. О выпуске <h3> <h3> имеет определенное дополнение, указанное ему в бутстрапе, как описано в @creimers. И если вы используете более крупное изображение, увеличьте высоту навигационной панели или логотип будет плавать снаружи.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <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="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</nav>

Ответ 3

Просто установите высоту и ширину, когда вы добавляете этот логотип. Я пробовал и работал нормально

Ответ 4

Заместитель изображения, который вы включаете, имеет высоту 50px. Он заключен в anchor (.navbar-brand) с padding-top of 15px и высотой 50px. Вот почему логотип-заполнитель выходит из бара. Попробуйте включить изображение меньшего размера или сыграйте с дополнением для привязки, назначив class или id тому, с которым вы можете ссылаться в своем css.

ИЗМЕНИТЬ Или удалите статический height: 50px из .navbar-brand. Затем ваш навигатор примет высоту своего самого высокого ребенка.

h3 в bootstrap по умолчанию имеет padding-top of 20px. Опять же, он завернут с помощью padding-top: 15px anchor. Вот почему он не вертикально центрирован, как вы этого хотите. Вы можете дать h3 a class или или id, который сбрасывает margin-top. И то же самое можно сделать с padding anchor.

Здесь что-то поиграть с: http://jsbin.com/jelec/1/edit?html,output

Ответ 5

Я проверил, и это сработало для меня.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

Ответ 6

Я установил .navbar-brand { min-height: inherit }, который решил проблему для меня (спасибо @creimers для вдохновения).