Bootstrap3 .visible- * .hidden- * display inline [英] Bootstrap3 .visible-* .hidden-* display inline
问题描述
Bootstrap有一些很好的 .visible - *
(例如 .visible-lg
)类实用程序,
使用这些类时,它会应用样式 display:block!important; $ c
但有时候,我想使用它显示一些元素 inline > code>或
inline-block
。
我如何干净地覆盖一些引导规则, ?
$ b p>似乎我不是唯一一个想知道这个问题。这是 github问题。
感谢您的最新回答!
Bootstrap v3.2.0更新
现在在Bootstrap v3.2.0中通过此提交本地解决了
根据新的响应式类文档:
从v3.2.0开始,每个断点的.visible- - 类有三种变体,每个CSS显示属性值如下所示:
类别组 | CSS显示
.visible - * - block |显示:block;
.visible - * - inline | display:inline;
.visible - * - inline-block | display:inline-block;
例如,您可以使用:
< p>装置是:< span class =" visible-lg-inline span>< / p>
其他实例
有关Stackoverflow的问题:
在引导问题中报告: p>
- #4929 - 响应式实用程序类可能会导致意外收缩
- #7808 - 在响应式实用程序中使用显示继承会导致元素错误显示
- #8500 - 使用内联元素的响应类使用
- #8869 - responsive .hidden- *类别从显示块到内嵌拦截
- #10263 - visible-xs makes display =即使对于内嵌元素也会阻止
Bootstrap has some nice .visible-*
(eg. .visible-lg
) class utility for selecting what to show or hide depending on the screen size.
When using those classes, it applies the styling display: block !important;
when in the correct screen size.
But sometimes, I'd like to use it for some elements that are displayed inline
or 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.
Thanks for the latest answer!
Update for Bootstrap v3.2.0
This is now natively solved in Bootstrap v3.2.0 with this commit
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:
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:
Reported in Bootstrap Issues:
- #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
这篇关于Bootstrap3 .visible- * .hidden- * display inline的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!