Bootstrap 3 Navbar с логотипом

Я хочу использовать панель навигации по умолчанию в Bootstrap 3 с логотипом вместо текста. Как правильно это сделать, не вызывая проблем с экранами разных размеров? Я предполагаю, что это общее требование, но я еще не видел хороший пример кода. Ключевым требованием, помимо приемлемого отображения на всех размерах экрана, является возможность выбора меню на меньших экранах.

Я попытался поместить тег IMG в тег A, который имеет класс navbar-brand, но из-за этого меню на моем телефоне с Android не функционировало. Я также попытался увеличить высоту класса navbar, но это все испортило еще больше.

Кстати, изображение моего логотипа больше, чем высота панели навигации.

Почему все пытаются сделать это трудным путем? Конечно, некоторые из этих подходов будут работать, но они более сложны, чем необходимо.

Хорошо, во-первых - вам нужно изображение, которое поместится в вашей панели навигации. Вы можете настроить изображение с помощью атрибута css height (позволяя масштабировать ширину) или просто использовать изображение подходящего размера. Что бы вы ни решили сделать - то, как это будет выглядеть, будет зависеть от того, насколько хорошо вы измените размер своего изображения.

По какой-то причине каждый хочет прикрепить изображение внутри якоря navbar-brand, и это не обязательно. navbar-brandприменяет текстовые стили, которые не нужны к изображению, а также к navbar-leftклассу (точно так же, как pull-left, но для использования в панели навигации). Все, что вам действительно нужно, это добавить navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

Вы можете даже следовать за этим с товарным знаком navbar, который появится справа от изображения.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

ПОЛНАЯ ДЕМО С МНОГИМИ ПРИМЕРАМИ

ВАЖНОЕ ОБНОВЛЕНИЕ: 21.12.15

В настоящее время в Mozilla обнаружена ошибка, которая нарушает навигационную панель в браузерах определенной ширины с помощью MANY DEMOS ON THIS PAGE . По сути, ошибка Mozilla включает в себя левый и правый отступы на ссылку бренда Navbar как часть ширины изображения. Тем не менее, это можно легко исправить, и я проверил это, и я уверен, что это самый стабильный рабочий пример на этой странице. Он автоматически изменит размер и работает во всех браузерах.

Просто добавьте это в ваш css и используйте navbar-brand так же, как и вы .img-responsive. Ваш логотип будет автоматически соответствовать

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Другой вариант - использовать фоновое изображение. Используйте изображение любого размера, а затем просто установите желаемую ширину:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

ОРИГИНАЛЬНЫЙ ОТВЕТ НИЖЕ (только для справки)

Кажется, люди часто забывают об объектах. Лично я считаю, что с ним проще всего работать, потому что изображение автоматически подстраивается под размер меню. Если вы просто используете подгонку объекта к изображению, он автоматически изменит размеры до высоты меню.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Было отмечено, что это не работает в IE "пока". Есть полифилл , но он может быть чрезмерным, если вы не планируете использовать его для чего-либо еще. Выглядит так, как будто планируется подгонка объекта в будущем выпуске IE объектов, поэтому, как только это произойдет, это сработает во всех браузерах.

Тем не менее, если вы заметили, что .img-отзывчивый класс в начальной загрузке, максимальная ширина предполагает, что вы помещаете эти изображения в столбцы или что-то, что имеет явное с set. Это будет означать, что 100% означает 100% ширину родительского элемента.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

Причина, по которой мы не можем использовать это с панелью навигации, заключается в том, что родительский элемент (.navbar-brand) имеет фиксированную высоту 50 пикселей, но ширина не установлена.

Если принять эту логику и обратной , чтобы быть отзывчивыми на основе высоты , мы можем иметь адаптивное изображение, чешуйки на высоту .navbar-бренде и путем добавления и автоматический набором ширина будут приспосабливаться к пропорции.

max-height: 100%;
width: auto;

Обычно мы должны были бы добавить display:block; к сценарию, но так как у navbar-brand уже есть float: left; Применительно к нему он автоматически действует как блочный элемент.

Вы можете столкнуться с редкой ситуацией, когда ваш логотип слишком маленький. Подход img-отзывчивый не принимает это во внимание, но мы будем. Кроме того, добавив атрибут «height» к .navbar-brand > imgвам, вы можете быть уверены, что он будет увеличиваться и уменьшаться.

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

Поэтому, чтобы завершить это, я собрал их вместе, и, похоже, они отлично работают во всех браузерах.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

ДЕМО http://codepen.io/bootstrapped/pen/KwYGwq

Хотя ваш вопрос интересен, я не ожидаю, что будет один ответ на него. Может быть, ваш вопрос слишком широк. Ваше решение должно зависеть от: другого содержимого в панели навигации (количества элементов), размеров вашего логотипа, должен ли ваш логотип действовать адаптивно и т. Д. Добавление логотипа в букву a (с брендом navbar) кажется хорошей отправной точкой. Я должен использовать класс navbar-brand, потому что это добавит отступ (верх / низ) 15 пикселей.

Я проверяю этот параметр на http://getbootstrap.com/examples/navbar/ с логотипом 300x150 пикселей.

Полный экран> 1200:

от 768 до 992 пикселей (меню не свернуто):

<768 (меню свернуто)

Помимо эстетических аспектов я не нашел никаких технических проблем. На маленьких экранах большой логотип может перекрывать или разрушать область просмотра. Экраны размером от 768 до 992 пикселей также имеют другие проблемы, когда содержимое не помещается в строку, см., Например: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

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

Вам понадобятся некоторые CSS и медиа-запросы, чтобы адаптировать навигационную панель к вашим потребностям на экранах разных размеров. Пожалуйста, попробуйте сузить свой вопрос. быть опишите проблему, которую вы обнаружили на Android.

обновление см. http://bootply.com/77512 для примера.

На небольших экранах, таких как телефон, свернутое меню появляется над логотипом

поменяйте местами кнопку и логотип в вашем коде, сначала логотип (установите поплавок: слева на логотипе)

Нет никакого способа выровнять пункты меню ни к чему, кроме верхней

установить margin-topдля .navbar-collapse ul. Использовать высоту логотипа минус высота панели навигации, чтобы выровнять по дну или (высота логотипа - высота панели навигации) / 2 по центру

Инструкция, как создать загрузочную навигационную панель с логотипом, который больше высоты по умолчанию (50 пикселей):

Пример с логотипом 100px x 100px, стандартный CSS:

1. Вычислите высоту и (отступы сверху + отступы снизу) логотипа. Здесь 120px (высота 100px + верхний отступ (10px) + нижний отступ (10px))

2. Перейти к начальной загрузке / настройке . Установите вместо высоты навигационной панели 50px> 120px (50 + 70) и navbar-collapse-max-height от 340px до 410px (340 + 70). Скачать css.

3. В этом примере я использую эту панель навигации . В навбар-бренд :

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...

   добавьте класс, например myLogo , и img (ваш логотип)

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>,

4. Добавить CSS

   .myLogo {padding: 10px; }

5. Подходит для других размеров.

пример

Ну, наконец-то у меня появилась эта проблема, вот мое решение, и я протестировал его на своем сайте во всех трех основных браузерах: Chrome, Firefox и Internet Explorer.

Прежде всего, если вы не используете текстовый логотип, полностью удалите «navbar-brand», так как я обнаружил, что именно этот класс является основной причиной удвоения моего свернутого навигационного меню.

Привет пользователю 3137032, чтобы он вел меня в правильном направлении.

Вы должны сделать пользовательский адаптивный контейнер изображений, я назвал мой "логотип"

Вот начальная разметка HTML:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

И код CSS:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

Значение в @media (max-width: x) может варьироваться в зависимости от ширины изображений вашего логотипа, у меня это 368px. Процентные доли, возможно, также должны быть изменены в зависимости от размера вашего логотипа. Первый запрос @media должен быть вашим порогом, а мой был шириной изображения (368 пикселей) + размер свернутой кнопки (44 пикселя) + около 60 пикселей, и он достиг 480 пикселей, и именно здесь я начинаю адаптивное масштабирование изображения.

Пожалуйста, не забудьте удалить мой синтаксис бритвы из частей HTML. Дайте мне знать, если это решит вашу проблему, это исправило мою.

Изменить: Извините, я пропустил ваш вопрос высоты Navbar. Есть несколько способов сделать это, лично я скомпилирую Bootstrap LESS с соответствующей высотой навигационной панели, для своих целей я использую 70px, а высота моего изображения - 68 px. Второй способ сделать это - в самом файле bootstrap.css найти «.navbar» и изменить min-height: на высоту вашего логотипа.

Мое решение - добавить css "display: inline-block" в тег img.

<img style="display: inline-block; height: 30px; margin-top: -5px">

ДЕМО: jsfiddle

Я использую img-отзывчивый класс и затем устанавливаю максимальную ширину aэлемента. Нравится:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

и CSS:

.navbar-brand {
    max-width: 50%;
}

Вы должны использовать код как это:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

Класс А тега должен быть «логотип», а не navbar-бренд.

Это зависит от того, какой высоты вы хотите, чтобы ваш логотип был.

Высота по умолчанию <a>в панели навигации составляет 20 пикселей, поэтому, если вы укажете height: 20pxсвой логотип, он будет хорошо совмещен.

Тем не менее, это немного мало для логотипа, поэтому я выбрал следующее:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

Это делает изображение высотой 30px и выравнивает его по вертикали, добавляя отрицательный отступ к вершине (5px составляет половину разницы между отступом a и размером изображения).

В качестве альтернативы вы можете изменить заполнение <a>элемента, например:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Быстрое исправление : создайте класс для себя logoи установите heightдля 28px. Это хорошо работает с navbar на всех устройствах. Обратите внимание, я сказал, что работает "ХОРОШО".

.logo {
  display:block;
  height:28px;
}

Мой подход заключается в том, чтобы включить ЧЕТЫРЕ разных изображения разных размеров для телефонов, планшетов, настольных компьютеров, больших настольных компьютеров, но показывать только ОДИН, используя отзывчивые служебные классы начальной загрузки, как указано ниже:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

Примечание. Вы можете заменить закомментированную строку предоставленным кодом. Замените PHP-код, если вы не используете WordPress.

Редактировать Примечание 2: Да, это добавляет запросы на ваш сервер при загрузке страницы, что может немного замедлиться, но если вы используете метод фонового спрайта css, скорее всего, логотип не будет напечатан при печати страницы, и приведенный выше код должен получить лучше SEO.

Вам не нужно добавлять дополнительный CSS, так как Bootstrap3 предоставляет его. Если вы не хотите добавить его. Это мой код размещения логотипа слева и ссылки справа. Эта навигация отзывчива. Внесите изменения в это, как считаете нужным.

HTML:

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

Я также реализую это через свойство фона CSS. Это работает здоровым при любом значении ширины.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

Другой подход заключается в реализации встроенного .text-hideкласса Bootstrap наряду с.navbar-brand заменить бренд текст / контент с фоновым изображением.

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

Это очень последовательный метод, который держит ваше изображение в центре. Чтобы настроить размер изображения, все что вам нужно сделать, это настроить.navbar-brand ширину, так как высота уже установлена.

Вот живая демонстрация

У меня такая же проблема. Я решил это так:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

Там нет Навбар-бренд класса. Результат выглядит как изображение логотипа, которое соответствует navbar и работает как ссылка. Также я рекомендую использовать класс navbar-right для пунктов меню, чтобы они не опускались ниже логотипа.

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

Может быть, это слишком просто, но я просто скопировал строку с брендом navbar, чтобы их было два: изображение и текст.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

И я создал изображение, которое помещается внутри панели навигации (примерно 1/2 высоты).

Если вы используете LESS, это работает:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

Этот код прекрасно работает, если вам нужно видеть бренд по центру и с автоматической шириной на панели инструментов. Он содержит функцию Wordpress для получения файла изображения по правильному пути:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

Добавьте следующее к .navbar-brandклассу

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

мой рабочий код - bootstrap 3.0.3. когда navbar-toggle, скрытое-xs оригинальное изображение логотипа.

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

Вы можете попробовать использовать запрос @media, например ниже.

Сначала добавьте класс логотипа, а затем используйте @media, чтобы указать высоту и ширину логотипа для каждого размера устройства. В приведенном ниже примере я нацеливаюсь на устройства, максимальная ширина которых составляет 320 пикселей (iPhone). Вы можете поэкспериментировать с этим, пока не найдете наиболее подходящую. Простой способ проверки: используйте Chrome или Firefox с проверяющим элементом. Сократите ваш браузер как можно дальше. Обратите внимание на изменение размера логотипа в зависимости от заданной вами максимальной ширины @media. Тестируйте на iPhone, устройствах Android, iPad и т. Д., Чтобы получить желаемые результаты.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

Пожалуйста, попробуйте следующий код:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

В моем случае не удалось заставить другие ответы работать (я, вероятно, не прошел тест на интеллект), и после некоторых экспериментов я использую это (которое, я считаю, очень близко к настройке Bootstrap по умолчанию):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

И в файле CSS я добавил следующее:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Обратите внимание, что @Html.ActionLink()это синтаксис Razor для <a>тега. Там, где написано, @Html.ActionLink(...)просто замените его соответствующим <a>тегом. В том же месте, где написано, @Url.Action(...)замените его соответствующим URL ( <a>в этом случае нет тега).

Это не семантика, я просто использую существующие a элемент, устанавливаю фоновое изображение, затем создаю несколько вариаций для разрешения @ 2x, меньших размеров экрана и т. Д.

Затем вы можете использовать .text-hideкласс, чтобы получить текст на странице по-старому. Простое и эффективное, но не правильное использование изображения.

Вот ссылка на вспомогательный класс для замены текста:

http://getbootstrap.com/css/#helper-classes

Самый простой и лучший ответ на этот вопрос - установить максимальную ширину и высоту в зависимости от вашего логотипа, изображение будет иметь максимальную высоту 50px, но не более 200px.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Это будет зависеть от размера вашего логотипа и имеющихся у вас элементов навигационной панели.

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

Пожалуйста, поймите код самостоятельно: D Это мой черновик кода, и он уже работает :) Вот скриншот.

Вместо замены текстового брендинга я разделил на две строки, как показано в коде ниже, и дал img-responsiveкласс изображению ......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

и кроме того, я добавил следующие коды CSS .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

Если мой код решит вашу проблему, я с удовольствием .....

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <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="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

// Не забыли добавить загрузчик в начало вашего кода.