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或以下，底部div显示的尺寸为md及以上。

问题是md和sm之间的间隙很小，无法显示两者。登录和注册按钮消失。

md +

md和sm之间（不显示）

sm-

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

Answer 1

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>

Answer 2

您只需要在您的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>