[英]How do i center align my navbar using bootstrap
I have tried so many things but none seem to work This is my final goal with navbar: 我已经尝试了很多东西,但是似乎都没有用。这是我使用navbar的最终目标:
and this is what i have right now: 这就是我现在所拥有的:
I can't seem to center the links no matter what i do 无论我做什么,我似乎都无法使链接居中
heres my code: 这是我的代码:
<nav class="navbar navbar-transparent">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
</div>
<ul class="nav navbar-nav">
<li><a href="#work">work</a></li>
<li><a href="#about">about</a></li>
<li><a href="#skills">skills</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#contact" >get in touch</a>
</ul>
</div>
</div>
</nav>
HTML: HTML:
<nav class="navbar navbar-transparent">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
</div>
<ul class="nav navbar-nav navbar-firstnav">
<li><a href="#work">work</a></li>
<li><a href="#about">about</a></li>
<li><a href="#skills">skills</a></li>
<li class="pull-right"><a href="#contact">get in touch</a>
</ul>
</div>
</nav>
CSS: CSS:
.navbar-nav {
float:none;
margin:0 auto;
text-align: center;
}
.navbar-firstnav>li {
display: inline-block;
float:none;
}
HTML 的HTML
<nav class="navbar navbar-transparent">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
</div>
<ul class="nav navbar-nav navbar-firstnav">
<li><a href="#work">work</a></li>
<li><a href="#about">about</a></li>
<li><a href="#skills">skills</a></li>
<li class="pull-right"><a href="#contact" >get in touch</a>
</ul>
</div>
</div>
CSS 的CSS
.navbar {
border-radius: 0;
background-image: -webkit-linear-gradient(0deg ,#232326 ,#5F695E);
}
.navbar-nav {
float:none;
margin:0 auto;
text-align: center;
}
.navbar-firstnav>li {
display: inline-block;
float:none;
}
.navbar-firstnav>li>a {
color: #FFF;
}
.navbar-firstnav>li>a:hover {
color: #FFF;
text-decoration: underline;
background: none
}
Are you floating your li
elements? 您是否正在浮动
li
元素? Floating the ul
? 浮动
ul
吗? If not have you tried applying the text-align: center;
如果没有,则尝试应用
text-align: center;
to your ul
? 对你的
ul
?
You will need to modify some CSS rules for Navbar component. 您将需要为Navbar组件修改一些CSS规则。 So add a class
center
to nav.navbar
and the following rules: 因此,将一个类
center
添加到nav.navbar
和以下规则:
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.