Bootstrap3 .visible- * .hidden- * display inline [英] Bootstrap3 .visible-* .hidden-* display inline

问题描述

Bootstrap有一些很好的 .visible - * （例如 .visible-lg ）类实用程序，

使用这些类时，它会应用样式 display：block！important;



但有时候，我想使用它显示一些元素 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的问题：

• Bootstrap 3类visible-lg将跨度移动到新行

在引导问题中报告： 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:

• Bootstrap 3 class visible-lg moves span to a new line

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屋！