首页 文章

bootstrap自定义导航栏 - 导航栏上的徽标

提问于
浏览
0

我想知道是否有一种方法可以使用bootstrap实现this template上的导航栏 . 我'd like to add a logo to the bootstrap navbar, but (like in the example) have it so that the logo extends further than the navbar'的高度和覆盖直接覆盖在图像滑块/轮播上(没有示例中的白条) . 此外,让它在导航栏中居中将是整洁的 .

如果在Bootstrap中无法做到这一点,还有另一种方法吗?我已经尝试过从头开始,但无法让它工作并做出响应 .

谢谢!

3 回答

  • 0

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

    导航栏,包含左对齐,居中对齐和右对齐的项目以及与内容重叠的徽标 .

    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>
    
  • 0

    是的你可以 . 你必须首先使你的图标有类.pull-right,然后创建一个导航栏,其中所有的div都有图片背景 . 如果您不明白,请转到bootstrap主页 . 它有大量的模板 .

  • 1

    当然,只需覆盖 navbar-brand 类,使其居中并浮动在导航栏上 .

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

    http://codeply.com/go/dv4rPK0Xws

相关问题