Изображение логотипа Twitter-Bootstrap-2 в верхней части панели навигации

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

  <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 голосов | спросил Gattoo 27 MarpmTue, 27 Mar 2012 20:29:53 +04002012-03-27T20:29:53+04:0008 2012, 20:29:53

5 ответов


0

Вы также должны добавить класс «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>
ответил Andres Ilich 27 MarpmTue, 27 Mar 2012 20:50:35 +04002012-03-27T20:50:35+04:0008 2012, 20:50:35
0

Перезаписать класс бренда либо в bootstrap.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>
ответил Simon Cunningham 29 MarpmThu, 29 Mar 2012 12:50:50 +04002012-03-29T12:50:50+04:0012 2012, 12:50:50
0

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


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

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

Затем используйте класс 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 LESS - https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

ответил jana4u 11 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 11 Sep 2012 02:04:40 +0400 2012, 02:04:40
0

я использую этот код для navbar на начальной загрузке 3.2.0, изображение должно быть высотой не более 50 пикселей, иначе оно будет кровоточить по стандартной навигационной панели bs.

Обратите внимание, что я специально не использую 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>
ответил Greg 24 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 24 Sep 2014 22:59:31 +0400 2014, 22:59:31
0

Если вы не увеличите высоту панели навигации.

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

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

ответил Fox 28 Mayam13 2013, 11:30:23

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

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132