不同的屏幕尺寸自举导航栏中心对齐

当我改变屏幕尺寸时，任何人都可以帮助我集中我的Bootstrap导航栏吗？不同的屏幕尺寸自举导航栏中心对齐

而且还我使用的是正常的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>

来源

2014-09-02 albaneso

刚发布:) – albaneso 2014-09-02 13:50:29

一种方式可以是：

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>

来源

2014-09-02 13:57:09 pbenard

这一个工程，但当我打开下拉链接它的底部边界线获得一半的锂标签。 http://i.imgur.com/kqIdjb9.jpg – albaneso 2014-09-02 14:06:27

我无法做一些截图......你能分享网址吗？或者在小提琴/ bootply中重现问题？ – pbenard 2014-09-02 14:08:44

对不起，但这不是为我工作，下拉菜单上的其他链接arent aragned，因为他们应该。这一个事情变得更糟糕:( – albaneso 2014-09-02 14:09:31

我想你可以尝试在你的导航栏这个div：

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

中庸之道改变width用自己的价值:)

来源

2014-09-02 13:52:01

我tryed，但它不工作。 – albaneso 2014-09-02 13:57:39

你把你的nav_bar的div？ – 2014-09-02 13:59:44

是的，但它没有奏效。 – albaneso 2014-09-02 14:18:44

引导使用类容器中心元件。你可以尝试这样的：

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

来源

2014-09-02 14:00:56 user2787009

用你的代码来看这个小提琴：http：//www.bootply.com/gFiYr9nZLr，内容不在中间对齐，它只是对齐到左边界。容器 – pbenard 2014-09-02 14:05:11

@TheLittlePig这个doenst的作品，因为我想要一个全宽的导航栏，而这一个不。 – albaneso 2014-09-02 14:21:37

不同的屏幕尺寸自举导航栏中心对齐

回答

相关问题