为什么引导程序类d-sm-none仍然在小屏幕上显示图像

Question

我希望使用bootstrap4有2列的行:第一列在所有视口中大小为9，第二列在lg和md中大小为3，但在sm视口中消失。

我尝试使用d-none/d-sm-none执行以下操作，但它不能按预期工作

      <div class="container">
        <div class="row">
          <div class="col-lg-9 col-md-9">
              <h1>Col-1: MD-9 or LG-9</h1>
          </div>
          <div class="col-lg-3 col-md-3 d-sm-none">
            <h1>Col-2: MD-3, LG-3, SM NONE</h1>
          </div>
          </div>
        </div>

无论视口大小如何，d-none将消失在第二列d-sm-none在lg和md上消失在第二列，但在sm中出现。

这是codepen，谢谢。

Answer 1

好了，我找到答案了。

d-*-none/d-none用于隐藏列中的元素，而不是列本身。所以答案是

  <div class="container">
        <div class="row">
          <div class="col-lg-9 col-md-9">
              <h1>Col-1: MD-9 or LG-9</h1>
          </div>
          <div class="col-lg-3 col-md-3">
            <h1 class="d-sm-none d-md-block">Col-2: MD-3, LG-3, SM NONE</h1>
          </div>
          </div>
        </div>

谢谢。