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）或显示： d-block d-md-none