html - 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之间不显示可以改什么？

标签： htmltwitterdisplay

Answer 1

sm和之间没有差距md

sm范围直到767pxwhilemd开始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>