Bootstrap 显示属性差距修复

Question

我有这个 div 行，我想在 window 大小更改时对其进行调整。

  <div class="row">
   <div class="col-md-12 d-block d-sm-none d-xs-none text-center">
     <a href="" class="btn my-4" role="button"> Login </a>
     <span class="or-spacer my-auto">or</span>
     <a href="" class="btn my-4" role="button"> Register </a>
     <br>
     <p>to claim this coupon</p>
    </div>

    <div class="col-md-12 text-left d-none d-md-block d-lg-block d-xl-block">
     <a href="" class="btn my-4" role="button"> Login </a>
     <span class="or-spacer my-auto">or</span>
     <a href="" class="btn my-4" role="button"> Register </a>
     <span class="or-spacer my-auto">to claim this coupon</span>
   </div>
  </div>

我关注了这个 bootstrap 页面中的类：https://getbootstrap.com/docs/4.0/utilities/display/

顶部 div 尺寸为 sm 及以下尺寸，底部尺寸为 md 尺寸及以上尺寸。

问题是 md 和 sm 之间有一个小间隙，两者都不显示。登录和注册按钮消失。

md+

在md和sm之间（无显示）

sm-

md和sm之间不显示可以改什么？

Answer 1

您只需要在您的 sm 块中将 d-sm-none 更改为 d-md-none：

<div class="row">
   <div class="col-md-12 d-block d-md-none d-xs-none text-center">
     <a href="" class="btn my-4" role="button"> Login </a>
     <span class="or-spacer my-auto">or</span>
     <a href="" class="btn my-4" role="button"> Register </a>
     <br>
     <p>to claim this coupon</p>
    </div>

    <div class="col-md-12 text-left d-none d-md-block d-lg-block d-xl-block">
     <a href="" class="btn my-4" role="button"> Login </a>
     <span class="or-spacer my-auto">or</span>
     <a href="" class="btn my-4" role="button"> Register </a>
     <span class="or-spacer my-auto">to claim this coupon</span>
   </div>
  </div>

Answer 2

sm和md

之间没有差距

sm 范围到 767px 而 md 从 768px

开始

试试这个：

<div class="row">
   <div class="d-none d-md-block">
     visible for md and above
   </div>

   <div class="d-block d-md-none">
    visible for sm and below
   </div>
</div>

Bootstrap 显示属性差距修复

Bootstrap display property gap fix

html

twitter

display

Bootstrap 显示 属性 差距修复

Bootstrap display property gap fix

html

twitter

display

Bootstrap 显示属性差距修复