Bootstrap 4 - hide on xs and sm not working

问题

I'm creating xs view for my app, and my problem is, when i want to hide one div on small and extra small devices this extra small is not working, i followed bootstrap 4 documentation, and i don't know why this is not working.

<div class="headers">
        <div class="row">
          <div class="col-lg-6 col-md-4 col-sm-5">Produkt</div>
          <div class="col-2 d-sm-none d-md-block d-flex justify-content-start">Cena</div>
          <div class="col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center">Ilość</div>
          <div class="col-lg-2 col-sm-3 d-flex justify-content-end">Wartość</div>
        </div>
      </div>

I want to put on second div:

d-none d-md-block

Show when screen is on md mode. When i set this on sm and xs is not hidding. When i add only d-sm-none to this line it's working well but not on xs.

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

回答1:

It's because the d-flex is overriding it. You should do this instead...

d-none d-md-flex

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-4 col-sm-5">Produkt</div>
        <div class="col-2 d-none d-md-flex justify-content-start">Cena</div>
        <div class="col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center">Ilość</div>
        <div class="col-lg-2 col-sm-3 d-flex justify-content-end">Wartość</div>
    </div>
</div>

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

Related:
Missing visible-** and hidden-** in Bootstrap v4

回答2:

For Bootstrap 4.0 and above:

Documentation: https://getbootstrap.com/docs/4.3/utilities/display/

Additional information:

Hidden only for screen size sm and smaller(like xs) or Visible only for screen size md and larger(like lg): d-none d-md-block
Visible only for screen size sm and smaller(like xs) or Hidden only for screen size md and larger(like lg): d-block d-md-none

来源：https://stackoverflow.com/questions/49494146/bootstrap-4-hide-on-xs-and-sm-not-working

标签

html

bootstrap-4