时间戳

首页 > 解决方案 > Bootstrap 导航栏未正确居中

html - Bootstrap 导航栏未正确居中

问题描述

我有一个使用引导程序创建的导航栏，但由于某种原因，它并没有完全居中。它在左侧偏离中心，我无法弄清楚为什么它没有完全居中。下面是它的代码。

  <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>

标签： htmlcsstwitter-bootstrapnav

解决方案

请试试这个 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>

推荐阅读