Bootstrap 4 - hidden classes - only hide on small screens

问题

How to hide span content only on small (sm) screens? I need this content visible on xs screens.

<span class="hidden-sm-down">Text</span>

There is a way to do this using only bootstrap classes or not?

回答1:

With Bootstrap 4 Beta 1, you can hide sm only with d-block d-sm-none d-md-block.

https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/

回答2:

There is an upcoming update for Bootstrap 4 that will enable hidden on a single viewport (hidden-x)..

https://github.com/twbs/bootstrap/pull/22113

All of the visibility classes will be revamped in this update.

Update for Bootstrap 4 Beta

If you want to hide an element on specific tiers (breakpoints) in Bootstrap 4, use the d-* display classes accordingly. Remember xs is the default (always implied) breakpoint, unless overridden by a larger breakpoint.

https://www.codeply.com/go/bRlHp8MxtJ

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down = d-none (same as hidden)
hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none

Demo of all hidden / visible classes in Bootstrap 4 beta

Also note that d-*-block can be replaced with d-*-inline, d-*-flex, etc.. depending on the display type of the element. More on the display classes in beta

回答3:

It's quite easy. All you have to know is, how to use bootstrap 4 classes properly.

Reference: https://getbootstrap.com/docs/4.0/utilities/display/

First think as it's divide into three ordered groups. (When some group is not applicable omit that group)

(hide_lower_limit) (display_size) (hide_upper_limit)

(hide_lower_limit): has only one class .d-none
(display_size): sizes to be visible (not-hide), eg: .d-sm-block, .d-md-block. It will have a format of .d-<size>-block
(hide_upper_limit): the upper limit which should be hidden. This has a format of .d-<size+1>-none

Let's look into some examples

Q1: Display on md and bigger.

ans:

Start with visible screen size, (display_size): .d-md-block.

Then think of all screen sizes which should be hidden, ie, all screen sizes

smaller than md hidden, (hide_lower_limit): .d-none
bigger than md not hidden, (hide_upper_limit): <omit>

d-none d-md-block

Q2: Display on sm and smaller.

ans: (display_size): .d-sm-block.

Hidden screen sizes

smaller than sm not hidden, (hide_lower_limit): <omit>
bigger than sm hidden, (hide_upper_limit): .d-md-none

d-sm-block d-md-none

Q3: Visible only in sm and md.

ans: (display_size): .d-sm-block .d-md-block.

Hidden screen sizes

smaller than sm hidden, (hide_lower_limit): .d-none
bigger than sm hidden, (hide_upper_limit): .d-lg-none

d-none d-md-block d-sm-block d-lg-none

回答4:

Reading the docs again found that may not be achieved using bootstrap classes and must be done by myself

So I ended up by doing this:

imported mixins and variables from bootstrap and

@each $bp in map-keys($grid-breakpoints) {
  .visible-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: block !important;
    }
  }
  .visible-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: block !important;
    }
  }
}

来源：https://stackoverflow.com/questions/40476201/bootstrap-4-hidden-classes-only-hide-on-small-screens

标签

bootstrap-4