Bootstrap 4-隐藏在xs和sm上不起作用 [英] Bootstrap 4 - hide on xs and sm not working

问题描述

我正在为我的应用程序创建xs视图，而我的问题是，当我想在小型和超小型设备上隐藏一个div时，这种超小型设备不起作用，我遵循了bootstrap 4文档，但我不知道为什么这不起作用.

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>

我想放第二格:

d-done d-md-block

d-none d-md-block

当屏幕处于md模式时显示.当我在sm和xs上对此设置不隐藏时.当我在此行中仅添加d-sm-none时，它运行良好，但在xs上却没有.

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

推荐答案

这是因为d-flex覆盖了它.您应该改为执行此操作...

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

相关:
在Bootstrap v4中缺少可见**和隐藏**

这篇关于Bootstrap 4-隐藏在xs和sm上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！