Bootstrap 3.1 visible-xs and visible-sm not working together

Question

I have a div that I want to show on sm and xs devices, it looks like this:

   

        

                      

              相关标签:
       
      

Answer 1

If you want to show it at multiple sizes, don't use visible-* but instead hide the other sizes you don't want with hidden-*. In this case: hidden-md hidden-lg

Answer 2

You must add one value from:

`.visible-*-block` for `display: block;`
`.visible-*-inline` for `display: inline;`
`.visible-*-inline-block` for `display: inline-block;`

In this case you will have something like this:

<div class="col-xs-4 col-sm-4 visible-xs-block visible-sm-block">

Keep up the good work :)

Answer 3

When I face issues like this, I would simply prefer to use my own custom media query to manipulate the visibility of an element.

.someclass{
    display: none;
}

@media (max-width: 992px) {
   .someclass{
      display: normal!important;
   }
}

Or if you want to re-use this, then define a custom class such as:

.visible-tablet-mobile{
    display: none;
}

@media (max-width: 992px) {
   .visible-tablet-mobile{
        display: normal!important;
   }
}

and re-use it instead of giving your div two visibility classes at a time.

Answer 4

Bootstraps works with classes that go from the specified width-class and up. For example if you put col-sm-4, this simply forces it to be 4 columns wide for the sm-width and wider.

In your case a simple class="col-xs-4 hidden-md hidden-lg" should be enough to get your desired solution.

The reason your first solution didn't work, is that you specified visible-xs before visible-sm. Which forces the sm class onto it, making it invisible on the xs-width. As this is specified in the stock bootstrap css.

Edit: For those who are using Bootstrap 4 this could be achieved with just class="col-4 d-md-none"