Bootstrap3 .visible-* .hidden-* display inline

问题

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!

回答1:

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

回答2:

This has been sort of fixed in v3.1.

.visible-lg or .visible-md will force display: block !important; but using .hidden-xs or .hidden-sm will display inline.

回答3:

The following library extends the visible helper classes with inline & inline-block variations:

https://github.com/moappi/bootstrap.inline-responsive

Implements the following:

visible-inline-*
hidden-inline-*

and

visible-inline-block-*
hidden-inline-block-*

回答4:

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: block anymore. This way you can use <div> for block context and <span> for inline-block context (the normal behavior of these tags)

来源：https://stackoverflow.com/questions/19098376/bootstrap3-visible-hidden-display-inline

标签

css

twitter-bootstrap

responsive-design

twitter-bootstrap-3