twitter bootstrap——导航栏中的中心品牌答案

【问题标题】：twitter bootstrap -- center brand in nav bartwitter bootstrap——导航栏中的中心品牌
【发布时间】：2012-07-16 12:31:25
【问题描述】：

有什么方法可以让品牌名称在导航栏中居中

我现在的代码是这样的

<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
            <ul class="nav pull-left">
                <li>    <button  class="btn btn-primary"> < Back </button> </li>
            </ul>
                <p class="brand"> Report </p> 

                <ul class="nav pull-right">
                    <li>   <button class="btn btn-primary pull-right"> New Report </button>  </li>
                </ul>
        </div>
      </div>
    </div>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

上述答案不适用于版本 2（响应式设计）：

而是将您的品牌包装在一个 div 中：

<div class="brand">
    <a href="/">YOUR BRAND</a>
</div>

并在您的覆盖样式表中重新定义 .brand 样式：

.brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
}

【讨论】：

我不需要将它包装在 div
你可以用任何块级元素包装它，或者使用 display: block 使其成为块级

【解决方案2】：

几种居中方法，您可能必须尝试每种方法：

设置自动边距：

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

或使用绝对定位元素的已知宽度（例如 200 像素）：

.brand { left: 50%; margin-left: -100px; }

【讨论】：

【解决方案3】：

终于让它工作了（我完美地检查了）

HTML 是：

<div class="navbar navbar-fixed-top center" >
<div class="navbar-inner">
    <ul class="nav">
        <li><a href="#">Doctors List</a></li>
    </ul>
</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;
}

【讨论】：

【解决方案4】：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <a class="navbar-brand" href="#"> <img src="img/logo.png"></a> <!-- move here your logo -->
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#!"><i class="fa fa-pencil"></i> Crear Post</a></li>
        <li class="dropdown">
          <a href="#!" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#!">Action</a></li>
            <li><a href="#!">Another action</a></li>
            <li><a href="#!">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#!">Separated link</a></li>
            <li><a href="#!">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#!">Iniciar Sesión</a></li>
        <li><a href="#!">Registrarse</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

CSS：

.navbar-brand {
    left: calc(50% - 65.5px); //65.5px It is half the width of my logo.jpg
    position: absolute;
}

【讨论】：

【解决方案5】：

在 html 中的品牌名称之后放置导航栏开关：

<div class="navbar-header">
 <a class="navbar-brand" href="#">Jjsukjcne</a>
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
</div>

CSS 代码：

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
}

【讨论】：