Question

当我更改屏幕尺寸时，有人可以帮助我集中我的Bootstrap Navbar吗？

而且我正在使用普通div，对于我需要居中对齐的页脚。

enter image description here

<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

我认为你可以在你的导航栏上尝试这个div：

#global {
  margin-left: auto;
  margin-right: auto;
  width: ...;
}

Juste使用您自己的值更改width：）

Answer 2

一种方法可以是：

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>

Answer 3

Bootstrap使用类容器来居中元素。你可以尝试类似的东西：

<div class="container"> <!-- Start Container -->
    <div class="collapse navbar-collapse navHeaderCollapse"> <!-- Start Navbar-->
         <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> <!--End Navbar-->
</div> <!-- End Container -->

不同的屏幕尺寸bootstrap Navbar中心对齐

3 个答案: