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 показан ниже панели навигации.
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>
перезаписать класс бренда, либо в начальной загрузке.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>
вы должны удалить 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
Я использую этот код для 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>
Если вы не увеличиваете высоту navbar..
.navbar .brand {
position: fixed;
overflow: visible;
padding-left: 0;
padding-top: 0;
}