中心 twitter 引导导航项

Posted 2023-04-13

【中文标题】中心 twitter 引导导航项

【英文标题】：Center twitter bootstrap navigation items

【发布时间】：2013-04-22 14:04:45

【问题描述】：

我正在尝试使我的导航项居中，我需要编辑什么才能做到这一点？我查看了 bootstrap.css 文件，但找不到更改设置的位置。我不知道该怎么做我一直在尝试一切。

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

【问题讨论】：

你能提供一个 JSFiddle 的例子吗？

【参考方案1】：

Twitter Bootstrap 导航项默认具有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

【参考方案2】：

用<div>包裹你想要居中的对象

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

//your code here

</div>

【参考方案3】：

Brandon Himpfen 在他的博客上举了一个例子。 http://www.himpfen.com/center-align-bootstrap-nav-pills/ "在 Twitter Bootstrap 中有导航 (nav) 丸，默认情况下，它是左对齐的。我们可以用 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>