时间戳

首页 > 解决方案 > Bootstrap 4 Image没有响应和拒绝类

twitter-bootstrap - Bootstrap 4 Image没有响应和拒绝类

问题描述

我有一张想在移动设备上消失的图像，我尝试了很多课程，但没有任何效果。并切换到仅一行而不是 2 列。

<div class="container-fluid">
  <h2 class="section-title text-center wow fadeInDown">OBRIGADO</h2>
  <div class="row">
    <div class="col-sm-6">
      <img class="imgfoot img-fluid mx-auto d-block d-sm-none d-md-block" src="storage/app/media/arrow-2.png" alt="" style="margin-top: 40px;">
    </div>
    <div class="col-sm-6">
      <h1 class="text-right wow fadeInDown animated" style="margin-top: 60px;font-size: 85px;">PARTILHA COM ALGUEM</h1>
    </div>
  </div>
</div>

标签： twitter-bootstrapbootstrap-4

解决方案

您搞砸了类逻辑：您需要将图像设置为 d-none （对于所有视图）然后 d-md-block （从尺寸 MD 向上显示）。

TLDR： 从 img 中删除这些类：d-block d-sm-none d-md-block 将这些类添加到 img：d-none d-md-block

编辑：

<div class="container-fluid">
<h2 class="section-title text-center wow fadeInDown">OBRIGADO</h2>
<div class="row">
    <div class="col-sm-12 col-md-6">
        <img class="imgfoot img-fluid mx-auto d-block " src="https://via.placeholder.com/150" alt="" style="margin-top: 40px;">
    </div>
    <div class="d-none d-md-block col-sm-12  col-md-6">
        <h1 class="text-right wow fadeInDown animated" style="margin-top: 60px;font-size: 85px;">PARTILHA COM ALGUEM</h1>
    </div>
</div>

推荐阅读