为什么引导程序类d-sm-none仍在小屏幕上显示图像 [英] why bootstrap class d-sm-none still displays image in small screen

问题描述

我希望通过使用bootstrap4来获得2列的行:第一列在所有视口中的尺寸为9第二列在 lg 和 md 中的大小为3，但在sm视口中消失.

I desire a row with 2 columns by using bootstrap4: 1st column takes size 9 in all viewports 2nd column takes size 3 in lg and md but disappears in sm viewport.

我尝试使用 d-none / d-sm-none 进行以下操作，但是它没有按预期工作

I tried the following with d-none/d-sm-none but it does not work as expected

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

d-none disappears 2nd column regardless the viewport size d-sm-none disappears 2nd column at lg and md but appear in sm..

这是 codepen 谢谢.

推荐答案

好的，我找到了答案.

d-*-none / d-none 用于隐藏列中的元素，而不是列本身.因此答案是

d-*-none/d-none is for hiding the element in the column, not the columns itself.. so the answer is

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

谢谢.

这篇关于为什么引导程序类d-sm-none仍在小屏幕上显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！