html - 不同屏幕尺寸 Bootstrap 导航栏中心对齐

Question

当我更改屏幕尺寸时，任何人都可以帮助我将 Bootstrap 导航栏居中吗？

而且我使用的是普通 div，对于页脚我也需要将其居中对齐。

<style type="text/css">
    .navbar-nav > li{
      padding-right:3px;
    }
<div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="index.php" style="margin-left:91px;"><span class="glyphicon glyphicon-home"></span> LINK</a></li>

                    <li class="dropdown">
                        <a href="#" class="dorpdown-toggle" data-toggle="dropdown">LINK<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">LINK</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" class="dorpdown-toggle" data-toggle="dropdown" >LINK<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">LINK</a></li>
                            <li><a href="#">LINK</a></li>
                            <li><a href="#">LINK</a></li>
                            <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>               </ul>

            </div>

Answer 1

一种方法可以是:

Bootply:http://www.bootply.com/QCmMLYr56f

CSS:

ul.navbar-nav{
    width: 100%;
    text-align:center
}

.navbar-nav li{
   display: inline-block;
    float: none;
    background:cyan;
  }

HTML

<div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.php" style="margin-left:91px;"><span class="glyphicon glyphicon-home"></span> LINK</a></li>

                    <li class="dropdown">
                        <a href="#" class="dorpdown-toggle" data-toggle="dropdown">LINK<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">LINK</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" class="dorpdown-toggle" data-toggle="dropdown">LINK<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">LINK</a></li>
                            <li><a href="#">LINK</a></li>
                            <li><a href="#">LINK</a></li>
                            <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>               </li></ul>

            </div>