我有一个使用引导程序创建的导航栏,但是由于某些原因,它并没有完全居中。它在左侧偏离中心,我不知道为什么它没有完美地居中。下面是它的代码。
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as
needed -->
<script src="js/bootstrap.js"></script>
<div class="row">
<nav class="navbar-default">
<div class="container">
<div class="navbar-header">
<ul class="nav navbar-nav" id="mainNav">
<li><a href="###">Locations</a></li>
<li><a href="###">Special Events</a></li>
<li><a href="###">Breakfast</a></li>
<li><a href="###">Lunch</a></li>
<li><a href="index.html" class="active text-uppercase">Liam's Food
Fusion</a></li>
<li><a href="###">Dinner</a></li>
<li><a href="###">Apps and Extras</a></li>
<li><a href="###">Online Ordering</a></li>
<li><a href="###">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</div>
答案 0 :(得分:0)
请尝试使用此CSS。
.navbar-default > .container {
display: flex;
justify-content: center;
}
.navbar-default>.container {
display: flex;
justify-content: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<nav class="navbar-default">
<div class="container">
<div class="navbar-header center-block">
<ul class="nav navbar-nav" id="mainNav">
<li><a href="###">Locations</a></li>
<li><a href="###">Special Events</a></li>
<li><a href="###">Breakfast</a></li>
<li><a href="###">Lunch</a></li>
<li><a href="index.html" class="active text-uppercase">Liam's Food
Fusion</a></li>
<li><a href="###">Dinner</a></li>
<li><a href="###">Apps and Extras</a></li>
<li><a href="###">Online Ordering</a></li>
<li><a href="###">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>