首页 文章

带有徽标或品牌名称文本的Bootstrap完整响应式导航栏

提问于
浏览
36

我想在Twitter Bootstrap 3.1.1中做一个具有指定高度的完整响应式导航栏,其中品牌可以包含图像(徽标)或文本 .

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
                <img src="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS:

body {
    margin-top: 125px;
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

问题是,在浏览器的窗口大小减小并且菜单折叠后,导航栏将返回其原始高度,徽标图像如下所示:

before collapsing

after collapsing

另一个问题是将 <img src="http://placehold.it/150x50&text=Logo" alt=""> 更改为 <h3>AppName</h3> 会使AppName不在中间:

after collapsing

目前它通过设置填充值来居中,但我不知道如何让它独立于它 .

有谁能帮我解决这个问题?

问候

EDIT:

以下是我想要实现的效果的准备图像:

没有折叠的导航栏与徽标图像:

before collapsing

折叠导航栏(导航栏高度相同,图像大小相同,但导航栏宽度不同):

collapsed navbar

没有折叠带有品牌名称文字的导航栏:

not collapsed

折叠导航栏(除了更改浏览器窗口宽度导致的导航栏宽度外,一切都相同):

collapsed

6 回答

  • 0

    如果你想实现this(你可以调整窗口大小以查看移动版本的外观),你所要做的就是拥有2个徽标图像(1个用于桌面,1个用于移动)并根据环境显示它们使用 visible-xshidden-xs 类 .

    所以我使用了这样的东西:

    <img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
    <img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt="">
    

    当然,我使用以下方式设计移动徽标:

    @media (max-width: 767px) { 
        .navbar-brand {
            padding: 0;        
        }
    
        .navbar-brand img {
            margin-top: 5px;
            margin-left: 5px;
        }
    }
    

    你可以看到所有的代码here . 如果你需要一个关于徽标的移动版本的文本,这不是什么大不了的事 . 只需用 <h1 class="visible-xs">AppName</h3> 替换徽标,然后更改媒体查询中的样式,如下所示:

    @media (max-width: 767px) { 
        .navbar-brand {
            padding: 0;        
        }
    
        .navbar-brand h1{
            //here add your style depending of the position you want the text to be placed
        }
    }
    

    编辑:

    你需要这个条件来使它工作:

    .navbar-toggle {
       margin: 23px 0; 
    }
    
    .navbar-nav, .navbar-nav li, .navbar-nav li a {
      height: 80px;
      line-height: 80px;
    }
    
    .navbar-nav li a {
      padding-top: 0;
      padding-bottom:0;
    }
    
  • 2

    navbar-inner 类和容器中添加品牌徽标的最佳方法 . 关于 <h3> 问题 <h3> 在bootstrap中有一定的填充,正如@creimers所说 . 如果您使用的是较大的图像,请增加导航栏的高度,否则徽标会浮动到外面 .

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-inner"> <!--changes made here-->
        <div class="container">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
    
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
    
                </button>
                <a class="navbar-brand" href="#">
                    <img src="http://placehold.it/150x50&text=Logo" alt="">
                </a>
            </div>
    
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    </nav>
    
  • 30

    您所包含的占位符图片的高度为 50px . 它包含在 anchor (.navbar-brand) 中, padding-top15px ,高度为 50px . 通过为 classid 分配's why the placeholder logo flows out of the bar. Try including a smaller image or play with the anchor'填充,您可以在_2495669中引用它 .

    EDIT 或者从 .navbar-brand 中删除静态 height: 50px . 然后,您的导航栏将采用其最高子项的高度 .

    默认情况下, h3 在bootstrap中的 padding-top20px . 再一次,它被 padding-top: 15px 锚包裹着 . 's why it'不像你想要的那样垂直居中 . 您可以给 h3 classid 重置margin-top . 你可以用 anchorpadding 做同样的事情 .

    这里有一些东西可以玩:http://jsbin.com/jelec/1/edit?html,output

  • -1

    我查了一下,它对我有用 .

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    
  • 0

    只需设置添加该徽标的高度和宽度即可 . 我试过并且工作正常

  • 0

    我设置 .navbar-brand { min-height: inherit } 为我解决了这个问题(感谢@creimers的灵感) .

相关问题