Javascript Twitter Bootstrap - 在导航栏中居中品牌徽标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14486261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap - centering brand logo in navbar
提问by itsme
I tryed centering the .brandlogo with:
我尝试将.brand徽标居中：
.brand { margin-left: auto; margin-right: auto; }
this is my top navbar layout:
这是我的顶部导航栏布局：
but it seems it doesn't works.
但它似乎不起作用。
I searched on stack before to post this answer and the code i used above, is taken from an answered question.
我之前在堆栈上搜索过这个答案，我上面使用的代码取自一个回答的问题。
Any idea how to center .brand ?
知道如何居中 .brand 吗？
NB: i can't use position:absolute and fixed, and i would like to do this responsively (responsive)
注意：我不能使用position:absolute and fixed，我想以响应方式执行此操作 ( responsive)
also i tryed this:
我也试过这个：
.brand {
margin:0 auto !important;
padding:0 auto !important;
position:absolute !important;
right:0px;
left:0px;
z-index:9999999999 !important;
}
回答by Sara
回答by Steve Hymanson
using bootstrap 3
使用引导程序 3
I added three classes to my global.less file to augment the bootstrap navbar.less classes.
我在 global.less 文件中添加了三个类，以增加引导程序 navbar.less 类。
This approach works through all the responsive @media rule sizes, but you will need to adjust font-size and menu-collapse points depending on the width of your menu items (this approach positions the navbar-brand absolutely - it "floats" over the other menu items).
此方法适用于所有响应式 @media 规则大小，但您需要根据菜单项的宽度调整字体大小和菜单折叠点（此方法绝对定位导航栏品牌 - 它“浮动”在其他菜单项）。
style:
风格：
.navbar-brand-centered {
position: absolute;
top: 0;
left: 50%;
height: 50px;
width: 200px; /* bootstrap has max-width: 200px rule */
margin-left: -100px;
margin-top: 8px;
text-align: center;
}
.navbar-brand-centered {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-brand-centered {
display: block;
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-computed;
color: @navbar-brand-color;
text-align: center;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
}
usage:
用法：
<div class="navbar navbar-fixed-top">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Be sure to leave the brand out here if you want it shown -->
<a class="navbar-brand-centered" href="/"><span style="font-size: 2em">mess<span style="color: red;">2</span>dress</span></a>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
<!-- YOUR MENU ITEMS HERE -->
This worked for me, but I'm sure there's a better way to integrate with the float-based approach that bootstrap implements. Open to feedback.
这对我有用，但我相信有更好的方法可以与引导程序实现的基于浮点的方法集成。开放反馈。
回答by Napi
I just used those in my style.css and it worked for me:
我只是在我的 style.css 中使用了它们，它对我有用：
/* The header of the navbar */
.navbar-header {
text-align: center;
margin: 10px;
float: none !important;
}
/* The website name */
.navbar-brand {
float: none !important;
}
