最小化屏幕尺寸时，网格框没有响应

Question

所以我创建了这个网格框，每个框都包含一个产品图片、产品标题和一些描述。网格框在正常桌面屏幕尺寸下看起来不错，但在最小化时看起来不太好。我已经尝试过媒体查询和宽度，边距右，但它仍然无法正常工作。 这是正常的窗口大小。我希望框大小在最小化屏幕尺寸中设置最大宽度。

这是最小的尺寸

我的 HTML 代码

<div class="row">
    <div class="col-6 col-sm-3 grid-dvr">
        <div class="grid-image"><img src="assets/images/services/dvr/ds-7104hqhi-k1.png" alt=""></div>
        <h5 class="grid-box-heading">DS-7104HQHI-K1</h5>
        <p class="grid-box-description">4-ch 1080p H.265 DVR</p>
    </div>
  
    <div class="col-6 col-sm-3 grid-dvr">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

CSS 代码

.grid-dvr {
  margin: 20px;
  border-radius: 5px;
  height: 100px;
  background-color: white;
}

.grid-dvr .grid-image {
  max-width: 150px;
  float: right;
}

.grid-box-heading {
  float: left;
  margin-top: -60px;
}

.grid-box-description {
  font-size: 12px;
  align-items: center;
  margin-top: 40px;
}

Answer 1

如果要使 div 以 xs 大小为全宽，则不应使用 col-6。而是使用 col 或 col-12 而不是 col-6

.grid-dvr {
  border-radius: 5px;
  height: 100px;
  background-color: black;
}

.grid-dvr .grid-image {
  max-width: 150px;
  float: right;
}

.grid-box-heading {
  float: left;
  margin-top: -60px;
}

.grid-box-description {
  font-size: 12px;
  align-items: center;
  margin-top: 40px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row m-2">
  <div class="col col-sm-3 grid-dvr mr-2">
    <div class="grid-image"><img src="assets/images/services/dvr/ds-7104hqhi-k1.png" alt=""></div>
    <h5 class="grid-box-heading">DS-7104HQHI-K1</h5>
    <p class="grid-box-description">4-ch 1080p H.265 DVR</p>
  </div>

  <div class="col col-sm-3 grid-dvr">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-12 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-12 .col-sm-3</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>