Bootstrap centering navbar

我是新手，並且在定位流體下拉菜單時遇到了一些問題。我想將它放在中心或我的頁面上，並嘗試了幾件事情，但並不完全正確。Bootstrap centering navbar

我試圖添加一個span6類，然後將float: none; margin: 0 auto;添加到css，並且這確實將它居中，但是當響應菜單踢入它的中間而不是左側時。這也與菜單項混淆。

我也試過把text-align:center;放在不同的地方，看它是否會做任何事情，但它似乎沒有影響任何東西。

任何幫助將是美好的！

這裏是我的html

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span12" > 
     <div class="navbar "> 
     <div class="container-fluid"> 
      <a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> 
      <div class="nav-collapse collapse navbar-responsive-collapse unique1"> 
      <ul class="nav"> 
       <li><?=anchor('/frontpage', 'Who we are');?></li> 
       <li class="dropdown"> 
       <a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a> 
       <ul class="dropdown-menu"> 
        <li> <a href="#">Action</a> 
        </li> 
        <li> <a href="#">Another action</a> 
        </li> 
        <li> <a href="#">Something else here</a> 
        </li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li> <a href="#">Separated link</a> 
        </li> 
        <li> <a href="#">One more separated link</a> 
        </li> 
       </ul> 
       </li> 
       <li class="dropdown"> 
       <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a> 
       <ul class="dropdown-menu"> 
        <li> <a href="#">Action</a> 
        </li> 
        <li> <a href="#">Another action</a> 
        </li> 
        <li> <a href="#">Something else here</a> 
        </li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li> <a href="#">Separated link</a> 
        </li> 
        <li> <a href="#">One more separated link</a> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

來源

2013-08-04 zazvorniki

http://getbootstrap.com/2.3.2/components.html#pagination你可能也想通過這個頁面。 –

@SangramSingh我已經經歷了這些，謝謝，那是我如何在第一位建立這個。而我沒有使用分頁，我正在處理導航欄 – zazvorniki

你是對的。你有沒有通過http://stackoverflow.com/questions/10128812/center-navbar-in-twitter-bootstrap-2-0？ –

一套保證金左：自動;保證金右：自動上UL帶班導航

來源

2013-08-04 19:59:51 ravisuhag

不幸的是，這不起作用......它只是坐在左側。 – zazvorniki

在Bootstrap.css線：3102編輯

.nav > li > a { 
/* display: block; */ 
}

編輯bootstrap.css文件行：3638到3651，如下所示：

.navbar .nav { 
    position: relative; 
    left: 0; 
    display: block; 
/* float: left; 
*/ margin: 0 10px 0 0; 
} 
.navbar .nav.pull-right { 
    float: right; 
    margin-right: 0; 
} 
.navbar .nav > li { 
/* float: left; */ 
}

對於以下HTML作品。它顯示對齊的菜單中心。

<html> 
<head> 

    <link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css"> 
    <style> 
    .navbar-inner { 
     text-align: center !important; 
    } 

    </style> 


</head> 

<body> 

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span12 navbar-inner" > 
     <div class="navbar "> 
     <div class="container-fluid"> 
      <a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> 
      <div class="nav-collapse collapse navbar-responsive-collapse unique1"> 
      <ul class="nav"> 
       <li><?=anchor('/frontpage', 'Who we are');?></li> 
       <li class="dropdown"> 
       <a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a> 
       <ul class="dropdown-menu"> 
        <li> <a href="#">Action</a> 
        </li> 
        <li> <a href="#">Another action</a> 
        </li> 
        <li> <a href="#">Something else here</a> 
        </li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li> <a href="#">Separated link</a> 
        </li> 
        <li> <a href="#">One more separated link</a> 
        </li> 
       </ul> 
       </li> 
       <li class="dropdown"> 
       <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a> 
       <ul class="dropdown-menu"> 
        <li> <a href="#">Action</a> 
        </li> 
        <li> <a href="#">Another action</a> 
        </li> 
        <li> <a href="#">Something else here</a> 
        </li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li> <a href="#">Separated link</a> 
        </li> 
        <li> <a href="#">One more separated link</a> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script> 
</body> 
</html>

來源

2013-08-06 06:48:20

這仍然不起作用。我添加了上面的確切代碼，但是所有navbar-inner都會將不需要的樣式添加到我的網站中。導航仍然被推到頁面的左側，text-align：center不起作用。 – zazvorniki

您是否在我寫的bootstrap.css文件中進行了更改？ –

是的，我添加了上面的確切代碼。它不被添加。 – zazvorniki

Bootstrap centering navbar

回答

相關問題