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

Question

我想在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;
}

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

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

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

有没有人可以帮我解决这个问题？

此致

修改

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

没有折叠导航栏并带有徽标图片：

折叠导航栏（导航栏高度相同，图片大小相同，但导航栏宽度不同）：

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

折叠导航栏（除了更改浏览器窗口宽度导致的导航栏宽度外，所有内容都相同）：

Answer 1

如果您想要实现this（您可以调整窗口大小以查看其移动版本的外观），您所要做的就是拥有2个徽标图像（1个用于桌面，1个用于移动）并根据环境使用visible-xs和hidden-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;
}

Answer 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>

Answer 3

您所包含的占位符图片的高度为50px。它包含在anchor (.navbar-brand)中padding-top 15px，高度50px。这就是占位符徽标从栏中流出的原因。尝试添加较小的图片，或者通过为class或id分配css或height: 50px来填充你的.navbar-brand。

修改 或者从h3中删除静态padding-top。然后，您的导航栏将占据其最高孩子的高度。

默认情况下，引导程序中的

20px的{​​{1}}为padding-top: 15px。同样，它被h3锚包裹。这就是为什么它没有像你想要的那样垂直居中的原因。您可以给class id或padding重置边距顶部。您可以使用anchor的{​​{1}}进行相同的操作。

可以使用以下内容：http://jsbin.com/jelec/1/edit?html,output

Answer 4

我查了一下，它对我有用。

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

Answer 5

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

Answer 6

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