【发布时间】：2020-04-28 15:59:34
【问题描述】：
我在 Bootstrap 4.3.1 上的显示属性有一些问题。这是在页面 ToyHou.se 上使用的。为此，我有一个“某种”响应版本，其中包括一些小改动，以使 xs 和 sm 上的阅读看起来不错。
这意味着我有两个版本的这种崩溃。在“调色板”上，我有一个用于 md 及以上 (A)，一个用于 xs 和 sm (B)。 A版工作正常。 B 版本似乎根本不起作用（在 767px 或以下不显示任何内容）或使折叠变形。
我是 display 属性的新手，即使我已经阅读了示例和指南，我也很难理解它是如何工作的。
我希望它看起来像什么： 超小/小版本将显示不同的卡片一张在另一张下方，居中。而中等及以上将显示两行两张牌和一张牌的第三张（就像它被编码到的那样）。
（请原谅我乱七八糟的编码，在 ToyHou.se 上，除非您支付高级会员资格，否则您不能使用单独的 css）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FIDEO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="mx-auto w-100" style="font-size: 15px;">
<div class="row no-gutters table-responsive d-flex justify-content-center">
<!-- ACORDEON -->
<div class="accordion" id="accordion" style="width: 520px; margin: 10px 5px; display: block">
<div class="mark-palette">
<div class="text-uppercase" style="background: #8f49bb;">
<a class="btn rounded-0 text-white d-flex border-bottom-0 justify-content-between" data-toggle="collapse" data-target="#mark-palette" aria-expanded="false" aria-controls="mark-palette" style="font-size: 18px; cursor: pointer; border: 1px solid #762ea3;">Color Palette and Markings<i class="fas fa-palette fa-fw my-auto"></i></a>
</div>
<div class="collapse" data-parent="#accordion" id="mark-palette">
<div class="p-3 bg-faded table-responsive" style="height: 290px; border:1px solid #762ea3;">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Color Palette</p>
<!-- Blocked on SM because bugs -->
<div class="d-none d-sm-none d-md-block">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
<!-- Phone friendly version -->
<div class="d-none d-sm-none">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
</div>
<hr style="border-top: 2px solid rgba(0,0,0,.1);">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Markings</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus incidunt laborum ea, excepturi ducimus vel odio architecto eaque ipsum, soluta doloremque sint deserunt assumenda eos magnam rem distinctio exercitationem cupiditate.</p>
<p>| 1 | Lorem ipsum dolor sit amet.</p>
<p>| 2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：