Bootstrap 4 - 隐藏在xs上并且不能正常工作

Question

我正在为我的应用程序创建xs视图，我的问题是，当我想在小型和超小型设备上隐藏一个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-flex压倒了它。你应该这样做......

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

有关： Missing visible-** and hidden-** in Bootstrap v4

Answer 2

对于Bootstrap 4.0及更高版本：

文档：https://getbootstrap.com/docs/4.3/utilities/display/

附加信息：

• 隐藏仅适用于屏幕尺寸sm和更小（如xs）或仅适用于屏幕尺寸md和更大（如lg）：d-none d-md-block
• 仅对于屏幕尺寸sm和较小（如xs）可见，或仅对屏幕尺寸md和更大（如lg）隐藏：d-block d-md-none