Bootstrap具有标志或品牌名称文本的全面响应式导航栏

2018-07-02 02:12:47

我想在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不在中间：

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

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

问候

编辑：

这里准备了我想要达到的效果图像：

没有标志图像折叠的导航栏：

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

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

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

如果你想达到这个目标（你可以调整窗口大小来查看手机版本），所有你需要做的就是拥有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;
    }
}

你可以在这里看到所有的代码。如果您需要在徽标的移动版本上放置文本，这不是什么大问题。只需用<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;
}

在navbar-inner类和容器navbar-inner添加品牌徽标的最佳方法。关于<h3>问题<h3>在引导过程中给出了一定的填充，就像@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>

您包含的占位符图片的高度为50px 。它用一个padding-top为15px ，高度为50px的anchor (.navbar-brand)包装。这就是为什么占位符徽标流出酒吧的原因。尝试包括一个较小的图像或通过分配一个class或一个id到锚的填充来玩，这可以在你的css引用。

编辑或从.navbar-brand删除静态height: 50px 。你的导航栏将会占据最高的孩子的高度。

引导程序中的h3默认具有20px的padding-top 。再次，它是用该padding-top: 15px锚点包装的。这就是为什么它不像你想要的那样垂直居中。你可以给h3一个class或者id来重置margin-top。你可以用anchor的padding来做同样的事情。

这里有一些可玩的地方：http://jsbin.com/jelec/1/edit?html,output

链接地址: http://www.djcxy.com/p/89463.html

上一篇: Bootstrap full responsive navbar with logo or brand name text

下一篇: Change bootstrap navbar collapse breakpoint without using LESS