css - bootstrap 自定义导航栏 - 导航栏上的 Logo

Question

我想知道是否有一种方法可以像 this template 上那样实现导航栏使用 Bootstrap 。我想向 Bootstrap 导航栏添加一个 Logo ，但是(就像在示例中一样)让 Logo 延伸得比导航栏的高度更远，并直接覆盖在图像 slider /旋转木马上(示例中没有白色条) .另外，让它在导航栏中居中会很整洁。

如果这在 Bootstrap 中是不可能的，还有其他方法吗？我试过从头开始做，但无法让它工作并做出响应。

谢谢!

Answer 1

看这里:http://jsfiddle.net/p58z2xgw/

带有左对齐、居中对齐和右对齐元素的导航栏以及与内容重叠的 Logo 。

CSS:

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

    background-image: url(http://jinglecheetah.com/wp-content/uploads/2014/01/Demo-Logo.jpg);
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}

HTML:

<div class="bs-example">
    <div class="container">
        <div class="navbar navbar-default">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
                <a class="navbar-brand" href="#"></a>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li classsdropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
        </div>
    </div>
<div class="well">content</div>
</div>