中心twitter引導程序導航項目

我正在嘗試將我的導航項目居中，爲了做到這一點，我需要編輯哪些內容？我查看過bootstrap.css文件，無法找到更改設置的位置。我無法弄清楚如何去做，我一直在嘗試一切。中心twitter引導程序導航項目

<div id="nav" class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</a> 

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
<div class="container"> 
<ul class="nav"> 
<li class="active"><a href="#">Home</a></li> 
<li><a href="#">Forum</a></li> 
<li><a href="#">Download</a></li> 
<li><a href="#">Play Now</a></li> 
<li><a href="http://www.07-pk.com/forum/register.php">Register</a></li> 
<li class="dropdown"> 
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> 
    Login 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
<!-- login form --> 
     <form action="http://www.07-pk.com/forum/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password,vb_login_md5password_utf)"> 
     <script type="text/javascript" src="http://www.07-pk.com/forum/clientscript/vbulletin_md5.js"></script> 
     Username: <input type="text" class="button" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="1" value="Username" onfocus="if (this.value == 'Username') this.value = '';" /> 
     <br /> 
     Password: <input type="password" class="button" name="vb_login_password" size="10" accesskey="p" tabindex="2" /> 
     <input type="submit" class="button" value="Login" tabindex="4" title="" accesskey="s" /> 
     <input type="hidden" name="s" value="" /> 
     <input type="hidden" name="do" value="login" /> 
     <input type="hidden" name="forceredirect" value="1" />   
     <input type="hidden" name="vb_login_md5password" /> 
     <input type="hidden" name="vb_login_md5password_utf" /> 
     <input type="hidden" name="url" value="http://www.07-pk.com" /> 
     </form> 
     <!--/login form --> 
    </ul> 
</li> 
</ul> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
</div>

來源

2013-04-29 Carl Kaufman

能否請您提供的jsfiddle例子嗎？ – ricardohdz 2013-04-29 01:25:13

Twitter的引導的導航數據項都具有默認float: left。考慮添加下列樣式到自己的CSS文件（或修改bootstrap.css，我不會推薦）：

.navbar .nav li { 
    width: 100px; /* or whatever width you want for items */ 
    display: inline-block; 
    float: none; 
} 
.navbar .nav { 
    float: none; 
    text-align: center; 
}

Fiddle example

來源

2013-04-29 05:33:38

包裝你的對象要與此<div>

到中心

<div style="width:300px; margin: 0 auto;"> 

//your code here 

</div>

來源

2013-04-29 07:48:08 equisde

Brandon Himpfen在他的博客上舉了一個例子。 http://www.himpfen.com/center-align-bootstrap-nav-pills/「在Twitter Bootstrap中有導航（導航）藥片，默認情況下它是左對齊的，我們可以用HTML div元素包裝導航並添加一些CSS。」
http://www.bootply.com/AiyCfTCcBV

/* CSS used here will be applied after bootstrap.css */ 
.centered-pills { 
    text-align: center; 
} 
.centered-pills ul.nav-pills { 
    display: inline-block; 
} 
.centered-pills li { 
    display: inline; 
} 
.centered-pills a { 
    float: left; 
} 
* html .centered-pills ul.nav-pills, *+html .centered-pills ul.nav-pills { 
    display: inline; 
} 

<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button>  
    </div> 

<div class="navbar-collapse collapse"> 
    <a class="navbar-brand pull-left" href="#">Brand</a> 
    <div class="centered-pills"> 
     <ul class="nav nav-pills"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Messages</a></li> 
     </ul> 
     <a class="navbar-brand pull-right" href="#">Brand</a> 
    </div> 

    </div> 

</nav>

來源

2015-01-03 01:12:56 Denise

中心twitter引導程序導航項目

回答

相關問題