我在Bootstrap 4.3.1上的display属性遇到一些问题。这是在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>最佳答案
将您的手机友好版本类别更改为
<!-- Phone friendly version -->
<div class="d-sm-block d-md-none mx-auto">
...
</div>
以前，您已经放置了
d-none和d-sm-none，这两个屏幕都将其隐藏了。 mx-auto用于应用使元素居中的自动页边距。另外，在您的调色板
w-100元素中添加一个<p>类以使其完整，宽度<p style="font-weight: bold; font-size: 16px;" class="w-100">Color Palette</p>
这是工作示例
<!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;" class="w-100">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-sm-block d-md-none mx-auto">
<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>