Bootstrap显示属性间隙修复

Question

我有此div行，希望在窗口大小更改时进行调整。

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

我遵循了此引导页面中的类：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>