我想要一个这样的导航栏:
我的想法似乎是将行和列放在导航栏中是一个错误的想法,但它有点有用......
现在,我希望我的导航链接(<ul>
)在整个页面中居中,我尝试了很多东西,但这是我只能得到的:
“/”分隔符不会让它变得更容易......
HTML :
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="navbar-header">
<a href="<?php echo $site->url() ?>"><img alt="Logo" class="navbar-left navbar-brand-logo" src="<?php echo url('assets/images/logo.png') ?>" style="height: 50px;">
<span class="navbar-brand" style="color: white;">GilDev</span></a>
</div>
</div>
<div class="col-sm-6">
<ul class="nav navbar-nav">
<li><a href="#">Accueil</a></li>
<li class="separator hidden-xs">/</li>
<li><a href="#">Projets</a></li>
<li class="separator hidden-xs">/</li>
<li><a href="#">À propos</a></li>
</ul>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</nav>
CSS :
@font-face {
font-family: Ubuntu;
src: url("../fonts/Ubuntu-R.ttf");
}
body, a
{
color: white;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: underline;
background-color: inherit;
color: white;
}
body
{
background-image: url("../images/gradient.png");
background-repeat: repeat-x;
background-color: #64B2DF;
font-family: Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.separator
{
padding-top: 15px;
}
.navbar-brand-logo
{
margin-right: 15px;
}
.navbar
{
padding-top: 10px;
}
我第一次尝试使用Bootstrap创建自己的主题,我很糟糕...希望你有想法将这些链接集中在一起!谢谢!
答案 0 :(得分:1)
您可以使用 .nav
上的以下代码轻松获得所需的菜单:
.nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
查看this working fiddle以获取直观表示。
答案 1 :(得分:0)
您可以尝试以下代码:
ul.nav {
display: table;
width: 100%;
text-align: center;
}
ul.nav > li {
display: table-cell;
text-align: center;
}