我一直在尝试修改叽叽t witter boot ap nav bar bar,,,,。。。。。。。。。。。。。。。。。。。。。。。。
@H_502_2@在另一篇文章中,我读到你使用这个
.tabs,.pills { margin: 0 auto; padding: 0; width: 100px; }@H_502_2@但这对我来说并不奏效 @H_502_2@我需要在css中改变以使其发生,我明白我将修改过的css放在引导和覆盖中。 @H_502_2@任何帮助赞赏 @H_502_2@这是我的标记 @H_502_2@布局/应用
<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 %>@H_502_2@我也试过这个
.nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ zoom: 1; /* hasLayout ie7 trigger */ } .nav { text-align: center; }
解决方法
您可以通过将菜单项设置为显示来定位您的导航菜单:inline-block而不是float:left像这样:
.navbar .nav,.navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; } .navbar-inner { text-align:center; }@H_502_2@虽然我建议您创建自己的课程来定位您想要中心的导航栏菜单,但这样您就不会打扰引导程序的默认值,并且会混淆您页面中可能出现的其他导航部分。你可以这样做: @H_502_2@注意导航栏容器中的.center类
<div class="navbar navbar-fixed-top center"> <div class="navbar-inner"> .... </div> </div>@H_502_2@然后你可以像这样定位.center类:
.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; }@H_502_2@演示:http://jsfiddle.net/C7LWm/show/ @H_502_2@编辑:忘记将子菜单重新对齐到左边,这是修复: @H_502_2@CSS
.center .dropdown-menu { text-align: left; }@H_502_2@演示:http://jsfiddle.net/C7LWm/1/show/