Twitter Bootstrap - 在导航栏中居中品牌徽标答案

【问题标题】：Twitter Bootstrap - centering brand logo in navbarTwitter Bootstrap - 在导航栏中居中品牌徽标
【发布时间】：2013-01-07 07:38:59
【问题描述】：

我尝试将 .brand 徽标居中：

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

这是我的顶级导航栏布局：

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

但它似乎不起作用。

我在发布此答案之前在堆栈上进行了搜索，我上面使用的代码取自已回答的问题。

知道如何将 .brand 居中吗？

注意：我不能使用 position:absolute and fixed，我想响应式地执行此操作 (responsive)

我也试过这个：

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

}

【问题讨论】：

示例中没有 CSS。您可以使用左侧的添加资源添加引导程序。
您的示例并不能说明您的问题，那么我们如何才能看到发生了什么？
Fiddle with CSS
@sachleen remove -1 我更新到
@sanchleen 谢谢你

标签： javascript css twitter-bootstrap navbar graphical-logo

【解决方案1】：

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

我给了它一个任意宽度，你可以随意设置。

jsFiddle

【讨论】：

我爱 Sara，只是你忘记了 bootstrap js，用你的代码检查这里；）jsfiddle.net/J4zkJ/7
你是对的，但我认为 CSS 问题没有必要；）

【解决方案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 -->

这对我有用，但我确信有更好的方法可以与 bootstrap 实现的基于浮点的方法集成。接受反馈。

【讨论】：

【解决方案3】：

我只是在我的 style.css 中使用了这些，它对我有用：

/* 导航栏的标题 */ .navbar-header { 文本对齐：居中；边距：10px；浮动：无！重要； } /* 网站名称 */ .导航栏品牌{ 浮动：无！重要； }

【讨论】：