隐藏bootstrap导航栏品牌，仅在导航栏折叠时显示居中

Question

也许品牌导航栏按钮不是这样做的，但是当我想要的时候，当导航栏折叠并显示切换按钮时，我希望显示一些文本或主页链接。

像这样：

我希望在导航栏未折叠时隐藏该品牌。这可能吗？

Answer 1

使用某些引导实用程序类相当容易。默认情况下，导航栏在XS（<768px）处折叠。

只有在您到达XS时才会显示某些内容，只需添加该大小的可见实用程序类。

<div class="visible-xs"></div>

如果您希望只在不在XS中时显示某些内容作为该大小的隐藏实用程序类。

<div class="hidden-xs"></div>

可以在此处找到更多信息：http://getbootstrap.com/css/#responsive-utilities-classes

Answer 2

要获得两个结果，请在折叠的导航栏中显示品牌，将其置于中心位置（根据问题标题），使用默认的Bootstrap导航条形码示例：

<a class="navbar-brand" href="#">Brand</a>

将其编辑为：

<a class="navbar-brand visible-xs-block text-center" style="float: none;" href="#">Brand</a>

两个注释：

正如Marcelo所说，
• visible-xs-block仅在xs设备上设置可见性，默认情况下导航栏会折叠;从bootstrap v3.2.0开始需要-block后缀（现在不推荐使用简单visible-xs）;
• style="float: none;"会覆盖阻止float: left;班级工作的navbar-brand班级的text-center。

Answer 3

看一下this小提琴的例子。 根据需要更改媒体查询的分辨率。您可能需要编辑导航栏的媒体查询以获得所需的匹配。

<强> CSS

@media (max-width:1024px){
    .navbar-header {
        width: 100%;
        text-align: center;
}
    .navbar-brand {
        display: block;
        float: none;
    }
}

@media (min-width: 1024px){
    .navbar-brand {
        display: none;
    }
}