Bootstrap 显示属性间隙修复答案

【问题标题】：Bootstrap display property gap fixBootstrap 显示属性间隙修复
【发布时间】：2020-03-08 00:04:15
【问题描述】：

我有这个 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之间不显示可以改什么？

【问题讨论】：

什么差距？ 不显示中要支付的价格下面的那个？如果是这样，您是否检查了开发工具，如果有的话，是什么导致了这种差距？
登录和注册按钮消失

标签： html twitter display

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：