twitter-bootstrap – Bootstrap完全响应的navbar带有标志或品牌

发布时间：2020-12-18 00:01:06 所属栏目：安全来源：网络整理

导读：我想在Twitter Bootstrap 3.1.1中做一个完全响应的指定高度的navbar，其中的品牌可以包括图像(徽标)或文本。 html： nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" div class="container" div class="navbar-header" button type="

我想在Twitter Bootstrap 3.1.1中做一个完全响应的指定高度的navbar，其中的品牌可以包括图像(徽标)或文本。

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/150x50u0026amp;text=Logo”alt =“”>到< h3> AppName< / h3>使AppName不在中间：

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

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

问候

编辑：

这里是我想要实现的效果的准备的图像：

不折叠导航栏与徽标图像：

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

未折叠的导航栏与品牌名称文字：

折叠导航栏(除了改变浏览器的窗口宽度导致的导航栏宽度之外，一切都相同)：

解决方法

如果你想实现 this(你可以调整窗口的大小，看看它将如何寻找手机版)，所有你需要做的是有2个标志图像(一个桌面和一个移动)，并显示它们取决于环境使用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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!