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

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

Answer 2

这是因为它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

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