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

Posted 2023-03-06

【中文标题】带有徽标或品牌名称文本的 Bootstrap 完全响应式导航栏

【英文标题】：Bootstrap full responsive navbar with logo or brand name text

【发布时间】：2014-07-05 05:46: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" >
            </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;

问题是浏览器窗口缩小，菜单折叠后，navbar恢复到原来的高度，logo图片如下：

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

目前它以设置填充值为中心，但我不知道如何使其独立于它。

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

问候

编辑：

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

未折叠的带有徽标图像的导航栏：

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

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

折叠的导航栏（除了浏览器窗口宽度改变导致的导航栏宽度外，其他都一样）：

【问题讨论】：

令人惊讶的是，bootstrap 团队没有提供设施来处理大多数网站中这种非常常见的情况，但却有大量设施用于不太常见的布局。我还没有找到一个很好的教程或简单的文档来说明如何做到这一点。

【参考方案1】：

您所包含的占位符图片的高度为50px。它被包裹在一个anchor (.navbar-brand) 中，其中padding-top 为15px，高度为50px。这就是占位符徽标从栏流出的原因。尝试包含一个较小的图像或通过分配一个 class 或 id 来使用锚的填充，您可以在 css 中引用它。

编辑 或者从.navbar-brand 中删除静态height: 50px。然后，您的导航栏将采用其最高子级的高度。

默认情况下，引导程序中的h3 具有padding-top 的20px。同样，它被 padding-top: 15px 锚包裹着。这就是为什么它不像你想要的那样垂直居中。你可以给h3 一个class 或id 来重置margin-top。您可以对anchor 的padding 执行相同的操作。

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

【讨论】：

如何更改导航栏高度？我认为对我的问题最简单的解决方案是将padding-top 和padding-bottom 设置为0，将navbar 的静态高度值设置为垂直放置的图像或文本居中，或者根据文本的高度动态设置高度或图片。但我不知道该怎么做。

那么，在移动版本上，您想要更小的图像还是文本？

如果您更改.navbar-brand 的高度（当前设置为50px），您的整个导航栏将采用其最大子导航栏的高度。您可以设置min-height 或根本不设置height。

【参考方案2】：

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

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

【讨论】：

这行不通。我不明白为什么会有赞成票。这是误导。

这真的不是答案，navbar-brand > img 不会根据浏览器/设备分辨率适当调整大小

【参考方案3】：

如果您想实现this（您可以调整窗口大小以查看移动版的外观），您所要做的就是拥有2个徽标图像（1个用于桌面，1个用于移动）并显示它们取决于使用 visible-xs 和 hidden-xs 类的环境。

所以我用了这样的东西：

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

当然，我使用以下方式设置移动徽标的样式：

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

【讨论】：

这是一个有趣的解决方案，但它与我的预期不同。我已经编辑了我的帖子，以便您可以清楚地看到我想要实现的目标。我想创建通用导航栏，而不是徽标，只需将 标签更改为

你折叠的nav比非折叠的nav高，而且图片的大小不一样，为什么dp你说它们是一样的？例如，您的图像具有 50 像素的高度，就像导航菜单一样，这意味着它将适合它们之间没有任何其他空间。你的问题还不清楚。

不！他们是一样的！它一定是被缩放的......请比较：i.stack.imgur.com/jv66U.png和i.stack.imgur.com/G16iL.png（i.stack.imgur.com/O0CFm.png和i.stack.imgur.com/OzWnp.png）

抱歉，无法编辑。在这种情况下，导航栏高度为 80 像素，徽标高度为 50 像素

你想要这样的东西吗？ jsfiddle.net/paulalexandru/z2pH4/1/embedded/result ，如果是的话，你需要做的就是把h3的高度设置成navbar的高度，然后使用line-height一样的高度，垂直对齐就完美了。

【参考方案4】：

我设置了.navbar-brand min-height: inherit ，它为我解决了这个问题（感谢@creimers 的启发）。

【参考方案5】：

我检查过，它对我有用。

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

【参考方案6】：

只需设置要添加该徽标的高度和宽度。 我试过了，效果很好