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

【问题标题】：Hide bootstrap navbar brand and only display centered when navbar is collapsed隐藏引导导航栏品牌，仅在导航栏折叠时居中显示
【发布时间】：2015-01-04 19:37:12
【问题描述】：

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

像这样：

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

【问题讨论】：

是的，这当然是可能的。你能告诉我们你的代码吗？或者更好的是，一个 JSFiddle？

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用一些引导实用程序类很容易做到这一点。默认情况下，导航栏在 XS (

要让某些东西仅在您到达 XS 时出现，只需添加该尺寸的可见实用程序类。

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

如果您希望某些东西仅在您不在 XS 中时显示为该尺寸的隐藏实用程序类。

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

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

【讨论】：

成功了，屏幕分辨率和媒体查询是关键。 :)

【解决方案2】：

要获得这两个结果，在折叠的导航栏中显示品牌并将其居中（根据问题标题），使用默认的 Bootstrap 导航条代码示例：

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

编辑为：

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

两个音符：

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

【讨论】：

【解决方案3】：

以this fiddle 为例。根据需要更改媒体查询的分辨率。您可能需要编辑导航栏的媒体查询以获得所需的匹配。

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

【讨论】：