相关疑难解决方法(0)

我正在使用twitter bootstrap来创建可切换的标签.这是我正在使用的CSS:

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

这个html正确地显示了标签,但是向左拉(这是应该发生的).我试图修改CSS以使标签在页面上居中,但还没有运气.我认为有更多css经验的人会知道如何做到这一点.

作为一个注释,还有另一个关于导航丸的中心问题,我尝试过,但它不适用于普通的导航标签.

谢谢.

我希望能够将导航停在页面的中间位置并使其保持在不同分辨率的中心位置.我不想使用偏移来推动它或边缘左边,因为这会在不同的浏览器宽度中将其搞砸.这是我正在搞乱的典型酒吧但是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 3中有一个固定的顶部导航栏.
一切正常,直到1350px.在1350px之后,导航栏内容之间会出现间隙.所以我想把我的导航栏放在中心位置.

我检查了这个,这个和这个的答案.他们都没有为我工作.

这是我的小提琴:http://jsfiddle.net/mcqHE/56/
目前我使用Navbar 1.
为了尝试居中导航栏,我加入Navbar 2了小提琴.

检查1500px宽度的小提琴.
*导航栏1是一行,没有居中并且有间隙.
*导航栏2居中,没有间隙,但它是两个衬里.
似乎原因是这个规则:@media (min-width: 1200px) .container { max-width: 1170px; }

那么我怎样才能使导航栏居中,如果宽度大于1350px则一行？

关于集中Twitter bootstrap品牌或将列表项集中在导航栏中有几个问题,但我还没弄明白,如何将两者都集中在一起.

这是一个示例,用于修改twitter bootstrap导航栏,但它只是列表项目的中心,而不是品牌.这是HTML的结构:

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

而CSS:

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

这是一个现场演示:http://jsfiddle.net/C7LWm/

我如何将品牌和列表项集中在一起,以便两者都集中在一条线上？

编辑:

我刚刚注意到,如果你在导航栏中有一个下拉菜单(比如你更新的答案),下拉列表就会搞砸了(下拉列表根本没有显示,如果显示,表单背景就会消失).一个更好的方法可能是,如果所有项目都没有居中并且有一条线,而是它们都应该在一条线上然后居中,类似于非响应视图,除了现在,还有一秒线.那可能吗？

我将twitter bootstrap navbar集成到我的asp.net项目中.但是,我正在尝试将我的引导文本对齐到中心.这是我的导航栏的源代码

<div id="twitterbootstrap">
<div class="navbar navbar-inverse 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>
        <a class="brand" href="#">iPolice</a>
        <div class="nav-collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#">Home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="Login.aspx">Login</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

这是我的引导程序的图像

然后我在里面添加了这个twitterbootstrap css来尝试并将ipolice,home,contact和login转移到中心

#twitterbootstrap {
position:absolute;
text-align:center;
}

哪个没用.我访问过此链接并尝试但仍无法执行此操作.请问如何将文本对齐到中心？