我是新手,我在定位流畅的下拉菜单时遇到了一些麻烦。我想把它放在中心或我的页面,并尝试了一些东西,但它不太正确。
我尝试添加一个span6类,然后将float: none; margin: 0 auto;
添加到css中,这确实使它居中,但当响应式菜单启动它时,它位于中间而不是左侧之间。这也与菜单项混淆。
我还尝试在各个地方放置text-align:center;
以查看是否可以执行任何操作,但它似乎没有任何效果。
任何帮助都会很精彩!
这是我的HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
设置margin-left:auto; margin-right:在带有类nav的ul上自动
答案 1 :(得分:0)
在Bootstrap.css行:3102编辑
.nav > li > a {
/* display: block; */
}
编辑bootstrap.css文件行:3638到3651,如下所示:
.navbar .nav {
position: relative;
left: 0;
display: block;
/* float: left;
*/ margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav > li {
/* float: left; */
}
对于以下HTML工作原理。它显示菜单中心对齐。
<html>
<head>
<link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
<style>
.navbar-inner {
text-align: center !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 navbar-inner" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>