html - Bootstrap 4 - 在 xs 和 sm 上隐藏不工作

Question

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

<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>

我想放在第二个 div 上:

d-none d-md-block

当屏幕处于 md 模式时显示。当我在 sm 上设置它时，xs 没有隐藏。当我只将 d-sm-none 添加到此行时，它运行良好但在 xs 上不行。

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

Answer 1

这是因为你应该使用d-none而不是d-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://codeply.com/go/XUSWoSdFcP

相关:
Missing visible-** and hidden-** in Bootstrap v4