中心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引导程序导航项目

回答

相关问题