CSS Bootstrap3 .visible-* .hidden-* 显示内联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19098376/
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
Bootstrap3 .visible-* .hidden-* display inline
提问by Augustin Riedinger
Bootstrap has some nice .visible-*(eg. .visible-lg) class utility for selecting what to show or hide depending on the screen size.
Bootstrap 有一些不错的.visible-*（例如.visible-lg）类实用程序，用于根据屏幕大小选择显示或隐藏的内容。
When using those classes, it applies the styling display: block !important;when in the correct screen size.
使用这些类时，它会display: block !important;在正确的屏幕尺寸下应用样式。
But sometimes, I'd like to use it for some elements that are displayed inlineor inline-block.
但有时，我想将它用于某些显示的元素inline或inline-block.
How could I cleanly override some bootstrap rules to have the choice? Or should it be a feature request in bootstrap?
我怎么能干净地覆盖一些引导规则来选择？或者它应该是引导程序中的功能请求？
EDIT
编辑
Seems like I'm not the only one wondering about this issue. Here's the github issue.
似乎我不是唯一一个想知道这个问题的人。这是github 问题。
Thanks for the latest answer!
感谢您的最新回答！
回答by KyleMit
Update for Bootstrap v3.2.0
Bootstrap v3.2.0 更新
This is now natively solved in Bootstrap v3.2.0 with this commit
现在，通过此提交在 Bootstrap v3.2.0 中本地解决了这个问题
According to the new responsive classes documentation:
根据新的响应类文档：
As of v3.2.0, the .visible--classes for each breakpoint come in three variations, one for each CSS display property value listed below:
从 v3.2.0 开始，每个断点的 .visible- -类有三种变体，一种用于下面列出的每个 CSS 显示属性值：
Group of classes | CSS display
.visible-*-block | display: block;
.visible-*-inline | display: inline;
.visible-*-inline-block | display: inline-block;
For example, you could use:
例如，您可以使用：
<p>Device is: <span class="visible-lg-inline">Large</span></p>
Other Instances
其他实例
Asked about on Stackoverflow:
在 Stackoverflow 上询问：
Reported in Bootstrap Issues:
在 Bootstrap 问题中报告：
- #4929 - Responsive utility classes may cause unexpected wrapping
- #7808 - Using display inherit in responsive utilities causes elements to be wrongly displayed
- #8500 - responsive class usage with inline element
- #8869 - responsive .hidden-* classes change from display block to inline-block
- #10263 - visible-xs makes display=block even for inline elements
回答by Pratyush
This has been sort of fixed in v3.1.
这已经在 v3.1 中修复了。
.visible-lgor .visible-mdwill force display: block !important;but using .hidden-xsor .hidden-smwill display inline.
.visible-lgor.visible-md将强制display: block !important;但使用.hidden-xs或.hidden-sm将显示内联。
回答by Chad Brown
The following library extends the visible helper classes with inline & inline-block variations:
以下库使用内联和内联块变体扩展了可见的帮助程序类：
https://github.com/moappi/bootstrap.inline-responsive
https://github.com/moappi/bootstrap.inline-responsive
Implements the following:
实现以下内容：
visible-inline-*hidden-inline-*
visible-inline-*hidden-inline-*
and
和
visible-inline-block-*hidden-inline-block-*
visible-inline-block-*hidden-inline-block-*
回答by dhm80
Updating to bootstrap 3.1 or above indeed solves the problem as from this point on the hidden-classes only hide the tag and don't set display: blockanymore. This way you can use <div>for block context and <span>for inline-block context (the normal behavior of these tags)
更新到 bootstrap 3.1 或更高版本确实解决了这个问题，因为从这一点上hidden-类只隐藏标签，不再设置display: block。这样你就可以<div>用于块上下文和<span>内联块上下文（这些标签的正常行为）
