相关疑难解决方法(0)

我希望能够将导航停在页面的中间位置并使其保持在不同分辨率的中心位置.我不想使用偏移来推动它或边缘左边,因为这会在不同的浏览器宽度中将其搞砸.这是我正在搞乱的典型酒吧但是ul总是在左边对齐.

     <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
           <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="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->

假设我们使用Twitter Bootstrap 2.0为导航栏设置了以下标记.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner pull-center">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

.nav内心居中的最佳方式是什么navbar-inner？

我只是想出了我自己的CSS样式:

@media (min-width: 980px) {
    .pull-center {
        text-align: center;
    }
    .pull-center > .nav {
        float:none;
        display:inline-block;
        *display: inline; *zoom: 1;
        height: 32px;
    }
}

我一直试图修改twitter bootstrap导航栏,此刻所有链接都对齐到左边,当我真正想要的是将它们放在中心位置时.

在另一篇文章中我读到你使用它

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

但这对我不起作用

我需要在css中更改以实现此目的,我理解我将修改后的CSS放在引导程序中并覆盖.

任何帮助赞赏

这是我的标记

布局/应用

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <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>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

我也试过这个

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* …