Twitter-Bootstrap-2 изображение логотипа поверх navbar

может кто-нибудь подсказать, как я могу разместить логотип на верхней части панели навигации? Моя разметка:

  <body>
    <a href="index.html"> <img src="images/57x57x300.jpg"></a>
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">

Он не работает как 57x57x300.jpg показан ниже панели навигации.

67

5 ответов

вы также должны добавить класс "navbar-brand" в свой образ a контейнера, также вы должны включить его внутри .navbar-inner контейнер, вот так:

 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
        <a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a>
     </div>
   </div>
 </div>
71

перезаписать класс бренда, либо в начальной загрузке.css или новый файл CSS, как показано ниже -

.brand
{
  background: url(images/logo.png) no-repeat left center;
  height: 20px;
  width: 100px;
}

и ваш HTML должен выглядеть так -

<div class="container-fluid">
  <a class="brand" href="index.html"></a>
</div>
55

вы должны удалить navbar-fixed-top класс в противном случае navbar остается фиксированным в верхней части страницы, где вы хотите логотип.

если вы хотите разместить логотип внутри navbar:

Высота Navbar (установить в @navbarHeight меньше переменной) является 40px по умолчанию. Ваш логотип должен поместиться внутри, или вы должны сначала сделать navbar выше.

затем использовать brand класс:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a href="/" class="brand"><img alt="" src="/logo.gif" /></a>
    </div>
  </div>
</div>

если ваш логотип более чем 20px, вы также должны исправить таблицы стилей.

если вы сделаете это меньше:

.navbar .brand {
  @elementHeight: 32px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
}

@elementHeight должно быть установлено на высоту изображения.

расчет заполнения берется из Twitter Bootstrap меньше -https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

в качестве альтернативы вы можете самостоятельно рассчитать значения заполнения и использовать чистый CSS.

это работает для Twitter Bootstrap версии 2.0.x, также должен работать в 2.1, но расчет заполнения был немного изменилось:https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

13

Я использую этот код для navbar на Bootstrap 3.2.0, изображение должно быть не более 50px, иначе оно будет кровоточить стандартным BS navbar.

обратите внимание, что я намеренно не использую class= 'navbar-brand', поскольку это вводит заполнение на изображении

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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="" href="/"><img src='img/anyWidthx50.png'/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">Active Link</a></li>
        <li><a href="#">More Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</div>
4

Если вы не увеличиваете высоту navbar..

 .navbar .brand {
 position: fixed;    
 overflow: visible;
 padding-left: 0;    
 padding-top: 0;
 }

см.http://jsfiddle.net/petrfox/S84wP/

3