Html 无法居中<;ul>;引导程序3中的内部列
我想要一个这样的导航栏: 似乎我在导航栏中放置行和列的想法是错误的,但它有点奏效 现在,我希望我的导航链接(即Html 无法居中<;ul>;引导程序3中的内部列,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我想要一个这样的导航栏: 似乎我在导航栏中放置行和列的想法是错误的,但它有点奏效 现在,我希望我的导航链接(即)在整个页面中居中,我尝试了很多方法,但我只能得到以下结果: “/”分隔符并没有使它更容易 HTML: <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="row"> <div class
)在整个页面中居中,我尝试了很多方法,但我只能得到以下结果:
“/”分隔符并没有使它更容易
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>
@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;
}
.nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
我第一次尝试用Bootstrap制作我自己的主题,我很差劲…希望你们有想法来集中这些链接!谢谢 您可以尝试以下代码:
ul.nav {
display: table;
width: 100%;
text-align: center;
}
ul.nav > li {
display: table-cell;
text-align: center;
}
您可以在
.nav
上使用以下代码轻松获得所需的菜单:
<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>
@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;
}
.nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
查看一个可视化表示。这其实很容易实现@GilDev。看看我的答案:可能是重复的作品,但当减少窗口宽度时,链接会堆积起来,尽管列似乎足够大…@GilDev不管它们是否居中,这都会发生。您可以使用
@media
查询使其适应不同的屏幕大小。