twitter-bootstrap 隐藏引导导航栏品牌，仅在导航栏折叠时显示居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26810946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide bootstrap navbar brand and only display centered when navbar is collapsed
提问by red888
Perhaps the brand navbar button isn't the way to do this, but when I would like is when the navbar collapses and displays the toggle button I would like some text or the home page link to appear.
也许品牌导航栏按钮不是执行此操作的方法，但是当我希望导航栏折叠并显示切换按钮时，我希望显示一些文本或主页链接。
Like this:
像这样：
I'd like the brand to be hidden when the navbar is not collapsed. Is this possible?
我希望在导航栏未折叠时隐藏品牌。这可能吗？
回答by Marcelo
This is fairly easy to do using some of the bootstrap utility classes. By default, the navbar collapses at XS (<768px).
使用一些引导实用程序类可以很容易地做到这一点。默认情况下，导航栏在 XS (<768px) 处折叠。
To have something appear only when you get to XS just add the visible utility class for that size.
要仅在您到达 XS 时才显示某些内容，只需添加该大小的可见实用程序类。
<div class="visible-xs"></div>
If you want something to show only when you are not in XS as the hidden utility class for that size.
如果您希望某些内容仅在您不在 XS 中时显示为该大小的隐藏实用程序类。
<div class="hidden-xs"></div>
More info can be found here: http://getbootstrap.com/css/#responsive-utilities-classes
更多信息可以在这里找到：http: //getbootstrap.com/css/#responsive-utilities-classes
回答by DaviG
To get both results, showing the brand just in collapsed navbar andhaving it centered (as per the question title), using the default Bootstrap navigation bar code example:
要获得这两个结果，请使用默认的 Bootstrap 导航条代码示例在折叠的导航栏中显示品牌并使其居中（根据问题标题）：
<a class="navbar-brand" href="#">Brand</a>
edit it to:
将其编辑为：
<a class="navbar-brand visible-xs-block text-center" style="float: none;" href="#">Brand</a>
Two notes:
两个注意事项：
visible-xs-block, as Marcelo said, sets the visibility just on xs devices, where the navbar collapses by default; the-blocksuffix is needed as of bootstrap v3.2.0 (simplevisible-xsis now deprecated);style="float: none;"overrides thefloat: left;of thenavbar-brandclass that would prevent thetext-centerclass to work.
visible-xs-block，正如马塞洛所说，只在 xs 设备上设置可见性，默认情况下导航栏折叠；从-blockbootstrap v3.2.0 开始需要后缀（simplevisible-xs现在已弃用）；style="float: none;"覆盖了float: left;了的navbar-brand，将防止类text-center类的工作。
回答by Aaron
Have a look at thisfiddle for an example. Change the resolution on the media query as required. You might need to edit the media queries for the navbar to get the match you need.
看看这个小提琴的例子。根据需要更改媒体查询的分辨率。您可能需要编辑导航栏的媒体查询以获得所需的匹配项。
CSS
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;
}
}
