How to center the bootstrap navigation bar

When I used Bootstrap to practice imitating a website today, I found that the menu in the navigation bar of the target website is centered. However, Bootstrap does not seem to have a centered style for the navigation menu. It took me a long time and many tests to finally find a solution.

The first method: add the following styles to div and ul: (recommended learning: Bootstrap video tutorial )

<div class="navbar-collapse collapse" style="text-align: center;">
  <ul class="nav navbar-nav" style="display: inline-block;float: none;">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>

Second method:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>

Add the following style:

.navbar-nav {
  float: none;
  text-align:center;
}
ul.nav.navbar-nav  li {
    float:none;
    display: inline-block;
    margin: 0em;
}

More Bootstrap related technical articles, Please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to center the bootstrap navigation bar. For more information, please follow other related articles on the PHP Chinese website!