Question

我正在尝试在较小的屏幕尺寸上隐藏“已更新：”，仅保留日期-效果很好。问题是，它隐藏了日期，并且在较大的屏幕尺寸上仅显示span中的“ Updated：”部分。

.u-date-box {
      position: absolute;
      overflow: hidden;
      z-index: 1;
      bottom: 5%;
      left: 0;
      height: 2rem;
      background: #FFF;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="u-date-box">
      <p>
        <span class="d-none d-sm-block">Updated: </span>
        <%= @post.updated_at.strftime('%b %d, %Y') %>
      </p>
    </div>

我知道d-none d-sm-block是问题，因为我尝试从范围中删除那些类，并且一切显示正常。知道为什么会这样吗？

Answer 1

仅用于正确理解： span：updated应该以较小的尺寸消失，但在较大的屏幕上可见。 “日期”应该完全可见。然后您给定的代码应该可以工作。

<div>
  <p>
    <span class="d-none d-sm-block">Updated: </span>
    <%= @post.updated_at.strftime('%b %d, %Y') %>
 </p>
</div>

I have added a fiddle

Answer 2

您的代码运行完美，当您在大屏幕上时，更新和时间都会出现，而在小屏幕上，只会出现时间。要使其内联，请将您的d-sm-block更改为d-sm-inline。会起作用

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <div>
  <p>
    <span class="d-none d-sm-inline">Updated: </span>
   abcd
  </p>
</div>

Bootstrap可见性实用程序在不应该隐藏元素的情况下

2 个答案: