Bootstrap中的中心导航栏[重复]
Posted
技术标签:
【中文标题】Bootstrap中的中心导航栏[重复]【英文标题】：Center Navbar in Bootstrap [duplicate] 【发布时间】：2017-02-18 03:02:43 【问题描述】：如何使用引导程序使菜单居中？ html：
<nav class='navbar navbar-default'>
<div class='container-fluid container'>
<div class='navbar-header'>
<a class='navbar-brand' href='#'>Title</a>
</div>
<div id='navbar' class='navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</div>
</div>
</nav>
这是基本的，但我尝试了各种解决方案，它不会使菜单居中，它总是显示为左对齐。我可以将列表元素居中，但不能将列表 ITSELF 居中。
【问题讨论】：
【参考方案1】：@media (min-width:768px)
/* centered navigation */
.nav.navbar-nav
float: left;
.nav.navbar-nav
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
.nav.navbar-nav > li
position: relative;
right: 50%;
.nav.navbar-nav li
text-align: left
http://output.jsbin.com/iJaJAzIM/3/
【讨论】：
太棒了，菜单居中。我很感激。现在，navbar-brand 标头已自行关闭。有没有办法让它与菜单的其余部分保持一致？ 可能会对您有所帮助。试试这个：-css-tricks.com/three-line-menu-navicon【参考方案2】：试试这个：
.navbar-default > .container-fluid
display: flex;
justify-content: center;
IE10 需要供应商前缀。 IE10以下不支持。
http://codepen.io/simply-simpy/pen/XjEZNW
【讨论】：
【参考方案3】：使用引导类行并使用第二个.class col-md-6 .col-md-offset-3
这可能对你有帮助
检查jsbin中的输出
@charset "utf-8";
/* CSS Document */
body
margin:0;
padding:0;
.navbar.navbar-default
background-image:none;
background-color:rgba(89,63,127,0.79);
border:none;
.navbarheader
color:#FFFFFF;
margin-top:-10px;
font-family: 'Lobster', cursive;
.nav,.navbar-nav
font-size:15px;
color:white;
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" type="text/css" href="MylandingSS.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity= "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<!----------------HEADER------------------------------>
<div class="navbar-header navbar-brand header"><h1 class="navbarheader">abcdefg</h1></div>
<!------------------LINKS----------------------------------->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="nav navbar-nav">
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>【讨论】：
我的意思是，它“有效”，但当我添加菜单项时，它再次偏离中心。必须有一种更清洁的方法来处理这个问题。 你能显示你的新代码吗abcdefg
第 1 页 第 2 页 第三页 第三页 我很难理解为什么这是一个如此复杂的问题。 你能不能使用 jsbin，这样我可以得到什么是正确的问题【参考方案4】：使整个导航栏的内容居中，（居中both 品牌和链接）..
.navbar .navbar-header,
.navbar-collapse
float:none;
display:inline-block;
vertical-align: top;
@media (max-width: 768px)
.navbar-collapse
display: block;
http://codeply.com/go/1lrdvNH9GI
如果您只想将链接居中，请参阅以下问题： Center content in responsive bootstrap navbar
【讨论】：
以上是关于Bootstrap中的中心导航栏[重复]的主要内容，如果未能解决你的问题，请参考以下文章