Question

我正在尝试在移动设备和桌面视图中隐藏图片，并将鼠标悬停在桌面上的图片上，而不是悬停在移动设备上。我使用过Bootstrap 4类，但它不起作用。我的代码是对的吗？

<!--start of code-->

<div class="container-fluid">

  <div class="row no-padding">
    <div class="col align-self-center hero">

      <!--image start-->
      <div class="row no-padding no-gutters">
        <!--display md,lg,xl desktop-->
        <div class="col-md-12 col-lg-12 col-xl-12 .d-none .d-md-block "> <img class="hidden-sm-down imghover img-fluid" src="images/hero.jpg" alt="The Semiotics hero"></div>

        <!--display xs, sm mobile/tablets -->
        <div class="col-xs-12 col-sm-12 .d-md-none "><img class="hidden-md-up imghover img-fluid" src="images/hero-mb.jpg" alt="The Semiotics hero"></div>
      </div>
      <!--image end-->

      <div class="hovertext">
        <!--display lg,xl desktop-->
        <div class="col .d-none .d-lg-block align-self-center">
          <h5 class="text-center"> ILLUSTRATION </h5>
          <h1 class="text-center"> darwin </h1>
          <h4 class="text-center"> July 14, 2017 </h4>
          <div class="explore-button text-center">

            <button type="button" class="btn btn-default">EXPLORE<span class="icon-right"></span><span class="icon-right after"></span></button>

          </div>
        </div>

      </div>
    </div>

  </div>
</div>

Answer 1

Bootstrap 4（beta）does not have类，如hidden-md-up。（Alpha version had it though.）您可以这样使用Display utilities：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="d-none d-md-block">shown only on md and up</div>
<div class="d-md-none">hidden on md and up</div>

＆＃13;

编辑：哦，我看到你在代码中有这些：

<div class="col .d-none .d-lg-block align-self-center">

你不需要点（.），只需写下：

<div class="col d-none d-lg-block align-self-center">

为什么我的图像不会隐藏在bootstrap 4隐藏类中

1 个答案: