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

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

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

До речі, зображення мого логотипа більше, ніж висота нав'язки.

Чому всі намагаються зробити це важким шляхом? Звичайно, деякі з цих підходів спрацюють, але вони складніші, ніж потрібно.

Гаразд, по-перше - вам потрібно зображення, яке вміститься у вашій панелі навігації. Ви можете налаштувати зображення за допомогою атрибута висоти css (що дозволяє ширині масштабувати) або просто використовувати зображення відповідного розміру. Що б ви не вирішили зробити - те, як це буде виглядати, залежатиме від того, наскільки добре ви розмірите своє зображення.

Чомусь кожен хоче приклеїти зображення всередині якоря navbar-brand, а це не потрібно. navbar-brandзастосовує текстові стилі, які не потрібні до зображення, а також до navbar-leftкласу (як і вліво, але для використання в навігаційній панелі). Все, що вам потрібно, - це додати navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></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="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

ЗАВДАННЯ ДЕМО З МНОГО ПРИКЛАДАМ

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

Наразі в Mozilla з’явилася помилка, яку я виявив, що розбиває навігаційну панель на певну ширину браузера з МНОГО ДЕМОСИ НА ЦІЙ СТОРІНІ . По суті, помилка mozilla включає в себе ліву та праву накладки на посилання на бренд navbar як частину ширини зображення. Однак це можна легко виправити, і я перевірив це, і я впевнений, що це найбільш стабільний робочий приклад на цій сторінці. Він змінить розмір автоматично і працює у всіх браузерах.

Просто додайте це у свій css та використовуйте бренд navbar так само, як і ви .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-чутливий у завантажувальному режимі, максимальна ширина передбачає, що ви розміщуєте ці зображення в стовпці або щось, що має явний з набором. Це означає, що 100% конкретно означає 100% ширину батьківського елемента.

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

Причина, по якій ми не можемо використовувати це з navbar, полягає в тому, що батьківський (.navbar-бренд) має фіксовану висоту 50px, але ширина не встановлена.

Якщо ми скористаємося цією логікою і повернемо її так, щоб вона відповідала залежно від висоти, ми можемо мати чуйне зображення, яке масштабується до висоти бренду.

max-height: 100%;
width: auto;

Зазвичай нам довелося б додати display:block;до сценарію, але оскільки навибар-бренд вже має float: left; застосований до нього, він автоматично виступає як блок-елемент.

Ви можете потрапити в рідкісну ситуацію, коли ваш логотип занадто маленький. Підхід, що реагує на імг, не враховує це, але ми будемо. Додавши атрибут "висота" до .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>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

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

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

Повний екран> 1200:

від 768 до 992 пікселів (меню не згорнуте):

<768 (меню згорнуте)

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

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

Вам знадобиться кілька запитів CSS та медіа, щоб адаптувати навігаційну панель до ваших потреб у різних розмірах екрана. Спробуйте звузити своє запитання. опишіть проблему, яку ви знайшли на android.

оновлення див. для прикладу http://bootply.com/77512 .

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

замініть кнопку та логотип у своєму коді, спочатку логотипом (встановіть поплавок: зліва на логотипі)

Немає можливості вирівняти пункти меню ні до чого, крім верху

встановити margin-topдля .navbar-collapse ul. Використовуйте висоту логотипа мінус висоту навбара, щоб вирівняти нижню частину або (висота логотипу - висота навбар) / 2 до центру

Інструкція, як створити навігаційний інструмент для завантаження з логотипом, який перевищує висоту за замовчуванням (50 пікселів):

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

1. Обчисліть висоту та (обшивка зверху + підкладка знизу) логотипу. Тут 120 пікселів (висота 100 пікселів + верхня частина підкладки (10 пікселів) + нижня частина підкладки (10 пікселів))

2. Перейти до завантажувальної програми / налаштувати . Встановіть замість висоти навигації 50px> 120px (50 + 70) та navbar-згортання-max-висоти від 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.

Перш за все, якщо ви не використовуєте текстовий логотип, тоді повністю видаліть "навбар-бренд", оскільки я виявив, що саме цей клас є основною причиною подвоєння мого згорнутого нав-меню.

Крикніть користувачеві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 (максимальна ширина: x) може змінюватись залежно від ширини зображень вашого логотипа, моя - 368px. Проценти, можливо, потрібно буде також змінити, залежно від розміру вашого логотипу. Перший @media-запит повинен бути вашим порогом, і мій був шириною зображення (368px) + розміром згорнутого кнопки (44px) + приблизно 60px, і він вийшов до 480px, саме звідки я починаю чуйне масштабування зображення.

Будь-ласка, видаліть мій синтаксис бритви з частин HTML. Дайте мені знати, якщо вона виправить вашу проблему, вона виправила мою.

Редагувати: Вибачте, я пропустив вашу проблему з висотою навбара. Є кілька способів вирішити це, я особисто складаю 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">

DEMO: jsfiddle

Я використовую клас img-respovable, а потім встановлюю максимальну ширину для 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>

Тег класу A повинен бути "логотипом", а не маркою навбар.

Це залежить від того, наскільки високим ви хочете бути вашим логотипом.

Висота за замовчуванням <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>

Це робить зображення на 30 пікселів у висоту і вертикально вирівнює зображення, додаючи негативний запас у верхню частину (5 пікселів - половина різниці між накладкою на 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. Це добре працює з навігацією на всіх пристроях. Зауважте, я сказав, що працює "ДОБРО".

.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>

Примітка. Ви можете замінити коментований рядок наданим кодом. Якщо ви не використовуєте wordpress, замініть php-код.

Редагувати Примітка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 background властивість. Це спрацьовує при будь-якому значенні ширини.

.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>

Класу навбар-бренд немає. Результат виглядає як зображення логотипу, яке підходить до навбар і працює як посилання. Також я рекомендую використовувати клас навігації вправо для пунктів меню, щоб вони не опускалися нижче логотипу.

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

Можливо, це занадто просто, але я просто скопіював рядок бренда навбар, щоб було два з них - зображення, а потім текст.

<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 від висоти).

Якщо використовується менше, це працює:

@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. під час перемикання на панелі навігації, приховане-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) Ви можете пограти з цим, поки не знайдете найкращу форму. Простий спосіб тестування: використовуйте хром або 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

Найпростіша та найкраща відповідь на це питання - встановити максимум ширини та висоти залежно від вашого логотипу, зображення має бути максимум 50 пікс., Але не більше 200 пікс.

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

// Не забудьте додати завантажувальний код у голову коду.