[英]Twitter Bootstrap - centering brand logo in navbar
I tryed centering the .brand
logo with: 我尝试将
.brand
徽标集中在:
.brand { margin-left: auto; margin-right: auto; }
this is my top navbar layout: 这是我的顶级导航栏布局:
http://jsfiddle.net/J4zkJ/3/ http://jsfiddle.net/J4zkJ/3/
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;
}
using bootstrap 3 使用bootstrap 3
I added three classes to my global.less file to augment the bootstrap navbar.less classes. 我在我的global.less文件中添加了三个类来扩充bootstrap 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. 这对我有用,但我确信有一种更好的方法可以与bootstrap实现的基于浮点的方法集成。 Open to feedback.
公开反馈。
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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.