在 Bootstrap 导航栏中居中品牌徽标
Posted
技术标签:
【中文标题】在 Bootstrap 导航栏中居中品牌徽标【英文标题】:Centering brand logo in Bootstrap Navbar 【发布时间】:2014-06-17 11:46:41 【问题描述】:我正在尝试实现一个 Bootstrap 3 导航栏,以便品牌徽标始终保持在中间。这是代码:
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-inner">
<div class="container">
<button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="/Content/themes/next/images/logo.png" /></a>
<div class="nav-collapse">
<ul class="nav">
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
</ul>
</div>
<ul class="nav pull-right">
<li>
<a href="#">
<div class="nextCog"></div>
</a>
</li>
</ul>
<span class="navbar-text pull-right">superpup1 </span>
</div>
</div>
</div>
它是一个漂亮的导航栏:
但是,我希望徽标(绿色)始终保持在中间。我将此样式添加到带有“品牌”类的标签中:
<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
<img src="/Content/themes/next/images/logo.png" />
</a>
它部分解决了问题:徽标在中间,但它会将其余的导航栏元素向下推:
这是我想消除的不良影响。你能提出一个解决方案吗?也许从一开始就将徽标居中是一种错误的方法?
【问题讨论】:
这对我来说就像 Bootstrap 2 【参考方案1】:试试这个:
.navbar
position: relative;
.brand
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
将徽标居中 50% 并减去徽标宽度的一半,以便在放大和缩小时不会出现问题。
见fiddle
【讨论】:
我只想在移动(screen-sm)设备上将徽标居中,所以我编写了一个媒体查询,将位置设置为绝对,将 margin-left 偏移徽标宽度的 1/2图像,并将左侧值设置为 50%。像魅力一样工作。 把“.brand”改成“.navbar-brand”就可以了。 您现在可以使用transform:translateX(-50%)
而不是 margin-left
来处理任何徽标宽度。
@Lee,这是一个更好的解决方案。此外,对于将来按原样使用答案的任何人,“徽标宽度”包含填充。我的徽标图像是 130 像素宽,但默认引导填充增加了 30 个额外像素,因此我必须使用 margin-left: -80px !important;
才能适当地居中。只需按照李的建议使用transform
。它工作得更好(至少在 Chrome 中)。【参考方案2】:
最简单的方法是css变换:
.navbar-brand
transform: translateX(-50%);
left: 50%;
position: absolute;
演示:http://codepen.io/candid/pen/dGPZvR
这种方式也适用于标志的动态大小的背景图片,并允许我们使用 text-hide 类:
CSS:
.navbar-brand
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
transform: translateX(-50%);
left: 50%;
position: absolute;
width: 200px; /* no height needed ... image will resize automagically */
html:
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
</a>
我们也可以使用 flexbox。然而,使用这种方法,我们必须将navbar-brand
移出navbar-header
。不过这种方式很棒,因为我们现在可以并排显示图像和文本:
.brand-centered
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
.navbar-brand
display: flex;
align-items: center;
演示:http://codepen.io/candid/pen/yeLZax
要仅在移动设备上实现这些结果,只需将上述 css 包装在媒体查询中:
@media (max-width: 768px)
【讨论】:
我更喜欢你的解决方案!谢谢! 实际上,当nav折叠时,这可能不起作用!无法点击按钮下拉菜单! @Hardycore 没有注意到这一点。不过很容易修复。我更新了代码笔。只需添加.navbar-toggle z-index: 1;
【参考方案3】:
2018 年更新
引导 3
看看这个例子是否有帮助:http://bootply.com/mQh8DyRfWY
品牌以..为中心
.navbar-brand
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
您的标记适用于 Bootstrap 2,而不是 3。不再有 navbar-inner
。
编辑 - 另一种方法是使用transform: translateX(-50%);
.navbar-brand
transform: translateX(-50%);
left: 50%;
position: absolute;
http://www.bootply.com/V7vKDfk46G
引导程序 4
在 Bootstrap 4 中,mx-auto
或 flexbox 可用于将品牌和其他元素居中。有关说明,请参阅How to position navbar contents in Bootstrap 4。
另见:
Bootstrap NavBar with left, center or right aligned items
【讨论】:
“编辑”解决方案是完美的。我不得不使用这种方法而不是更简单的绝对居中方法,因为它会干扰我网站的谷歌分析并扩展到整个页面。【参考方案4】:老问题,但仅供后人参考。
我发现最简单的方法是将图像作为导航栏品牌的背景图像。只需确保输入自定义宽度即可。
.navbar-brand
margin-left: auto;
margin-right: auto;
width: 150px;
background-image: url('logo.png');
【讨论】:
这是唯一适合我的动态品牌图片尺寸的解决方案【参考方案5】:<style>
.navbar-brand
margin: auto;
</style>
<!--HTML-->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="logo goes here" class="logo"
loading="lazy">
</a>
</nav>
【讨论】:
【参考方案6】:徽标真正居中且链接合理的解决方案。
导航的最大推荐链接数为 6,具体取决于每个链接中单词的长度。
如果您有 5 个链接,请插入一个空链接并设置样式:
class="hidden-xs" style="visibility: hidden;"
这样链接的数量总是偶数。
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-nav > li
float: none;
vertical-align: bottom;
#site-logo
position: relative;
vertical-align: bottom;
bottom: -35px;
#site-logo a
margin-top: -53px;
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<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">Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-justified navbar-nav center-block">
<li class="active"><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" ></a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
<li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
要查看结果,请点击run sn-p,然后点击full page
Fiddle
【讨论】:
【参考方案7】:由于它是一个 flexbox(可能是由于 justify-content:space-between
BT4 css 属性。),如果您添加第三个元素,名称和按钮的兄弟,它自然会在代码中居中第二个元素。
我只是在a之后添加<span>login</span>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light mt-5">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<span>login</span>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
【讨论】:
以上是关于在 Bootstrap 导航栏中居中品牌徽标的主要内容,如果未能解决你的问题,请参考以下文章