在较大的视口中将响应式 Bootstrap 水平卡片强制转换为垂直卡片答案

【问题标题】：Forcing Responsive Bootstrap Horizontal Cards into Vertical Cards at larger viewports在较大的视口中将响应式 Bootstrap 水平卡片强制转换为垂直卡片
【发布时间】：2020-11-10 18:40:10
【问题描述】：

我正在试验 Bootstrap 4 卡及其响应行为。我的目标是让两个水平引导卡水平堆叠，只是为了折叠成垂直卡是更小的视口尺寸，以便与移动屏幕兼容。虽然我可以使用标准引导代码来实现这一点，但卡片首先会缩小尺寸以匹配缩小的视口，使我的图片偏离中心，然后再变成垂直卡片。无论如何我可以在更大的视口中将水平卡片强制转换为垂直卡片样式吗？

HTML：

<div class="container-fluid">
            <div class="card-deck justify-content-center">
                <div class="card mb-3" style="max-width: 740px;">
                  <div class="row no-gutters">
                    <div class="col-md-4">
                      <img src="https://devshift.biz/wp-content/uploads/2017/04/profile-icon-png-898.png" class="card-img" alt="...">
                    </div>
                    <div class="col-md-8">
                      <div class="card-body">
                        <h5 class="card-title">NAME</h5>
                        <p class="card-text"><b>From</b>: LOCATION<br><br></p>
                        <p class="card-text">ROLES, DESCRIPTION</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card mb-3" style="max-width: 740px;">
                  <div class="row no-gutters">
                    <div class="col-md-4">
                      <img src="https://devshift.biz/wp-content/uploads/2017/04/profile-icon-png-898.png" class="card-img" alt="...">
                    </div>
                    <div class="col-md-8">
                      <div class="card-body">
                        <h5 class="card-title">NAME</h5>
                        <p class="card-text"><b>From</b>: LOCATION<br><br></p>
                        <p class="card-text">ROLES, DESCRIPTION</p>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>

请注意，这些内容直接取自 Bootstrap Documentation on Cards found here。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>BOOTSTRAP CARD TEST</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <!-- DOCUMENT/CODE LINKS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  <script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <div class="container-fluid">
    <div class="card-deck justify-content-center">
      <div class="card mb-3" style="max-width: 740px;">
        <div class="row no-gutters">
          <div class="col-md-4">
            <img src="https://devshift.biz/wp-content/uploads/2017/04/profile-icon-png-898.png" class="card-img" alt="...">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">NAME</h5>
              <p class="card-text"><b>From</b>: LOCATION<br><br></p>
              <p class="card-text">ROLES, DESCRIPTION</p>
            </div>
          </div>
        </div>
      </div>
      <div class="card mb-3" style="max-width: 740px;">
        <div class="row no-gutters">
          <div class="col-md-4">
            <img src="https://devshift.biz/wp-content/uploads/2017/04/profile-icon-png-898.png" class="card-img" alt="...">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">NAME</h5>
              <p class="card-text"><b>From</b>: LOCATION<br><br></p>
              <p class="card-text">ROLES, DESCRIPTION</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

@satanshu-mishra - TL;DR: 在 card-img-top 上使用 Bootstrap 显示类进行垂直显示（d-block d-sm-none）以及用于水平显示的单独 DIV (d-none d-sm-block) 以控制响应式图像交换。

Bootstrap 4.3 中水平卡片的文档对我想要创建的响应式效果没有帮助。我能够使用 Bootstrap 显示类为默认 (xs) 屏幕宽度的垂直位置的 card-img-top 元素创建类似的效果，并将卡片图像作为水平位置的 DIV 的背景图像：

（注意：我使用 Ruby on Rails Active Storage 存储卡片图像和从 Webpack 发出的透明间隔图像以启用水平方向的背景图像效果。您应该能够替换带有标准 HTML 图像标签的括号）

<div class="card col-12">
    <%= image_tag(artist.avatar, class: 'card-img-top d-block d-sm-none') %>
    <div class="row no-gutters">
        <div class='col-4 d-none d-sm-block' style='overflow:hidden; background: url(<%= url_for(artist.avatar) %>);background-repeat: no-repeat; background-position: center; background-size: auto 100%;'>
            <%= image_pack_tag 'media/stylesheets/images/trans_spacer.png', height: 100 %>
        </div>
    <div class="col">
        <div class="card-body">
            <div class="row align-items-end">
                <div class="col-12 col-sm-8">
                    <p><!-- CONTENT GOES HERE --></p>
                </div>
            </div>
        </div>
    </div>
</div>

我无法使用卡片组创建相同的效果，但我希望这可以为您提供一个有用的起点。

【讨论】：