Twitter的引导 - 为中心的品牌标志在导航栏(Twitter Bootstrap - cent

我tryed定心.brand与标志：

.brand { margin-left: auto; margin-right: auto; }

这是我的顶部导航栏中的布局：

http://jsfiddle.net/J4zkJ/3/

但似乎并不工作。

我搜索了叠前发布这个答案，我在上面使用的代码，是从回答问题采取的。

任何想法如何中心。品牌？

注：我不能使用position:absolute and fixed的，我想这样做响应（ responsive ）

还我tryed这一点：

.brand { 
  margin:0 auto !important;
  padding:0 auto !important;
  position:absolute !important;
  right:0px;
  left:0px;
   z-index:9999999999 !important;

}

Answer 1:

.navbar .brand {
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  float: none;
}

我给它一个任意宽度，将其设置为你想要的内容。

的jsfiddle

Answer 2:

使用自举3

我加了三个班到我的global.less文件，以加强引导navbar.less类。

这种方法适用在所有的响应@media规则大小，但你将需要调整字体大小和菜单崩溃点，这取决于你的菜单项的宽度（这种做法绝对定位导航栏品牌 - 它“浮”在其他菜单项）。

样式：

.navbar-brand-centered {
    position: absolute;
    top: 0;
    left: 50%;
    height: 50px;
    width: 200px;  /* bootstrap has max-width: 200px rule */
    margin-left: -100px;
    margin-top: 8px;
    text-align: center;
  }

  .navbar-brand-centered {
    color: @navbar-inverse-brand-color;
    &:hover,
    &:focus {
      color: @navbar-inverse-brand-hover-color;
      background-color: @navbar-inverse-brand-hover-bg;
    }
  }

  .navbar-brand-centered {
    display: block;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding: @navbar-padding-vertical @navbar-padding-horizontal;
    font-size: @font-size-large;
    font-weight: 500;
    line-height: @line-height-computed;
    color: @navbar-brand-color;
    text-align: center;
    &:hover,
    &:focus {
      color: @navbar-brand-hover-color;
      text-decoration: none;
      background-color: @navbar-brand-hover-bg;
    }
  }

用法：

<div class="navbar navbar-fixed-top">
    <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <!-- Be sure to leave the brand out here if you want it shown -->
    <a class="navbar-brand-centered" href="/"><span style="font-size: 2em">mess<span style="color: red;">2</span>dress</span></a>

    <!-- Place everything within .navbar-collapse to hide it until above 768px -->
    <div class="nav-collapse collapse navbar-responsive-collapse">
        <!-- YOUR MENU ITEMS HERE -->

这为我工作，但我敢肯定有，以与引导实现了基于浮动的方式整合更好的办法。 打开反馈。

Answer 3:

我只是用那些我style.css文件和它的工作对我来说：

    /* The header of the navbar */
    .navbar-header {
        text-align: center;
        margin: 10px;
        float: none !important;
    }

    /* The website name */
    .navbar-brand {
        float: none !important;
    }

文章来源: Twitter Bootstrap - centering brand logo in navbar