不同的屏幕尺寸引导导航栏中心对齐答案

【问题标题】：Different Screen Size bootstrap Navbar center alignment不同的屏幕尺寸引导导航栏中心对齐
【发布时间】：2014-09-02 22:25:24
【问题描述】：

当我更改屏幕尺寸时，谁能帮我将 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>

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

一种方法可以是：

引导层：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>

【讨论】：

这个有效，但是当我打开下拉链接时，底部边框线进入了 li 标签的一半。 i.imgur.com/kqIdjb9.jpg
我不能用截图做点什么……你能分享一下网址吗？或者在 fiddle/bootply 中重现问题？
对不起，但这对我不起作用，下拉菜单上的其他链接没有按应有的方式排列。有了这个，情况会变得更糟:(
我希望它们像这些一样，但导航栏在所有屏幕尺寸中都居中对齐：bootply.com/yQVKTWHroq
为什么不起作用？导航栏为黄色，小提琴中的项目为青色：bootply.com/t67hF1N9o3

【解决方案2】：

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

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

只需用您自己的值更改width :)

【讨论】：

你把 div 放在你的 nav_bar 周围了吗？

【解决方案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 -->

【讨论】：

用你的代码看这个小提琴：bootply.com/gFiYr9nZLr，内容没有居中对齐，它只是对齐到 .container 的左边框
@TheLittlePig 这确实有效，因为我想要一个全宽导航栏，而这个没有。