修改 twitter bootstrap 导航栏 [英] Modify twitter bootstrap navbar

问题描述

我一直在尝试修改 twitter bootstrap 导航栏，目前所有链接都向左对齐，而我真正想要的是将它们放在中央.

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

.tabs, .pills {边距:0 自动；填充:0；宽度:100px；}

但这对我不起作用

我需要在 css 中更改什么才能实现这一点，我知道我将修改后的 css 放在引导程序中并覆盖.

感谢任何帮助

这是我的标记

布局/应用

<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="导航"><%= 渲染共享/导航栏登录"%>
<%其他%><div class="nav-collapse"><ul class="nav"><%=渲染共享/导航栏"%>

<%结束%>

我也试过这个

.nav >李{浮动:无；显示:内联块；*显示:内联；/* ie7 修复 */缩放:1；/* hasLayout ie7触发器*/}.nav {文本对齐:居中；}

解决方案

您可以通过将菜单项设置为 display:inline-block 而不是 float:left<来居中导航菜单/code> 像这样:

.navbar .nav,.navbar .nav >李{浮动:无；显示:内联块；*显示:内联；/* ie7 修复 */*缩放:1；/* hasLayout ie7触发器*/垂直对齐:顶部；}.navbar-内{文字对齐:居中；}

虽然我建议您创建自己的类来定位您希望居中的导航栏菜单，但这样您就不会打扰引导程序默认值，也不会弄乱您页面中可能有的其他导航部分.你可以这样做:

^{注意导航栏容器中的 .center 类}

<div class="navbar-inner">....

然后你可以像这样定位 .center 类:

.center.navbar .nav,.center.navbar .nav >李{浮动:无；显示:内联块；*显示:内联；/* ie7 修复 */*缩放:1；/* hasLayout ie7触发器*/垂直对齐:顶部；}.center .navbar-inner {文字对齐:居中；}

演示:http://jsfiddle.net/C7LWm/show/

编辑:忘记将子菜单项向左重新对齐，这是修复:

CSS

.center .dropdown-menu {文本对齐:左；}

演示:http://jsfiddle.net/C7LWm/1/show/

Ive been trying to modify the twitter bootstrap navbar, at the moment all the links are aligned to the left, when what i would really like is the have them central.

In a different post i read that you use this

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

But this did not work for me

What do i need to change in the css to make this happen, i understand i put the modified css in the bootstrap and overrides.

Any help appreciated

this is my markup

layouts/application

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

I've also tried this

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

解决方案

You can center your nav menu by setting your menu items to display:inline-block instead of float:left like so:

.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;
}

Though i suggest you create your own class to target your navbar menu that you wish to center, this way you won't bother the bootstrap default values and mess with other nav sections you may have in your page. You can do it like so:

^{Notice the .center class in the navbar container}

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

And then you can target the .center class like so:

.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;
}

Demo: http://jsfiddle.net/C7LWm/show/

Edit: Forgot to realign the submenu items to the left, this is the fix:

CSS

.center .dropdown-menu {
    text-align: left;
}

Demo: http://jsfiddle.net/C7LWm/1/show/

这篇关于修改 twitter bootstrap 导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！