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

Пожалуйста, запустите следующий код, чтобы проверить версию.

#include<iostream>

int main() {
    if (__cplusplus == 201402L) std::cout << "C++14\n";
    else if (__cplusplus == 201103L) std::cout << "C++11\n";
    else if (__cplusplus == 199711L) std::cout << "C++98\n";
    else std::cout << "pre-standard C++\n";
}
365
задан KyleMit 9 May 2014 в 20:52
поделиться

28 ответов

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

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

-1
ответ дан Ch UmarJamil 9 May 2014 в 20:52
поделиться

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

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

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

0
ответ дан ConnorMcF 9 May 2014 в 20:52
поделиться

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

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

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

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

0
ответ дан Ken Prince 9 May 2014 в 20:52
поделиться

Вам не нужно добавлять дополнительный 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>
1
ответ дан Krista A. 9 May 2014 в 20:52
поделиться

В моем случае не удалось заставить другие ответы работать (я, вероятно, не прошел тест на интеллект), и после некоторых экспериментов я использую это (которое, я считаю, очень близко к настройке 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>).

0
ответ дан Manfred 9 May 2014 в 20:52
поделиться

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

Хорошо, сначала - вам нужно изображение, которое поместится в вашей панели навигации. Вы можете настроить изображение с помощью атрибута 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, который появится справа от изображения.

408
ответ дан Michael 9 May 2014 в 20:52
поделиться

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

Высота <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>, например:

<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>
4
ответ дан cwohlman 9 May 2014 в 20:52
поделиться

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

<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 должен быть «логотипом», а не navbar-брендом.

5
ответ дан NurlanXp 9 May 2014 в 20:52
поделиться

Этот код отлично работает, если вам нужно видеть бренд по центру и с автоматической шириной на панели инструментов. Он содержит функцию 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">

1
ответ дан Taras Vovkovych 9 May 2014 в 20:52
поделиться

При использовании LESS это работает:

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

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}
1
ответ дан XåpplI'-I0llwlg'I - 9 May 2014 в 20:52
поделиться

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

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

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

14
ответ дан Igor Ivancha 9 May 2014 в 20:52
поделиться

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

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

ДЕМО: jsfiddle

14
ответ дан Kuofp 9 May 2014 в 20:52
поделиться

мой рабочий код - 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>
0
ответ дан OpenCode 9 May 2014 в 20:52
поделиться

Другой подход заключается в реализации встроенного класса Bootstrap .text-hide наряду с .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, поскольку высота уже установлена.

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

2
ответ дан Bryan Willis 9 May 2014 в 20:52
поделиться

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

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

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

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

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

      <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. Подходят для других размеров.

Пример

21
ответ дан Sun 9 May 2014 в 20:52
поделиться

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

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

Нет класса navbar-brand. Результат выглядит как изображение логотипа, которое соответствует 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>
2
ответ дан Igor Ivancha 9 May 2014 в 20:52
поделиться
<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>
146
ответ дан KyleMit 9 May 2014 в 20:52
поделиться
<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 Это мой черновой код, и он уже работает :) Вот скриншот.

enter image description here

0
ответ дан Igor Ivancha 9 May 2014 в 20:52
поделиться

Вместо замены текстового брендинга я разделил на две строки, как показано в коде ниже, и присвоил 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;
}

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

0
ответ дан Igor Ivancha 9 May 2014 в 20:52
поделиться

Может быть, это слишком просто, но я просто скопировал строку бренда 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 высоты).

1
ответ дан twiddly 9 May 2014 в 20:52
поделиться

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

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

3
ответ дан vascorola 9 May 2014 в 20:52
поделиться

Я также реализую это через свойство фона 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
}
2
ответ дан crx4 9 May 2014 в 20:52
поделиться

Я использую img-отзывчивый класс и затем устанавливаю max-width для элемента 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%;
}
13
ответ дан dustinfarris 9 May 2014 в 20:52
поделиться

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

.logo {
  display:block;
  height:28px;
}
4
ответ дан Igor Ivancha 9 May 2014 в 20:52
поделиться

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

<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>
0
ответ дан Dhaval Solanki 9 May 2014 в 20:52
поделиться

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

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

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

enter image description here

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

enter image description here

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

enter image description here

Кроме эстетических аспектов я не нашел никаких технических проблем. На маленьких экранах большой логотип может перекрывать или разрушать область просмотра. Экраны размером от 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 по центру

23
ответ дан user728291 9 May 2014 в 20:52
поделиться

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

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

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

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}
0
ответ дан user3137032 9 May 2014 в 20:52
поделиться

Bootstrap 3 navbar logo resizing

ЗАВЕРШИТЕ ДЕМО С МНОГИМИ ПРИМЕРАМИ

ВАЖНОЕ ОБНОВЛЕНИЕ: 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 "пока". Существует polyfill , но это может быть чрезмерно, если вы не планируете использовать его для чего-либо еще. Похоже, подгонка объекта планируется , планируется для будущего выпуска IE, поэтому, как только это произойдет, это сработает во всех браузерах.

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

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

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

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

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

71
ответ дан Bryan Willis 9 May 2014 в 20:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: