bootstrap row-cols-sm-1 不适用于卡片。当它应该是 1 时，两张卡片出现在单元格屏幕上

Question

这是我的代码

<div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-1 g-4">
  <div class="col">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
           <div class="card-body">
           <h5 class="card-title">...</h5>
            <p class="...</p>
           </div>
       </div> 
  </div>

如您所见，row-cols-sm-1 设置为 1，但是在 Google Chrome 的开发工具中将视图设置为 phone 时，页面显示每行两张卡片，而它应该只有一张。如果我删除 sm-1 class 并放置 md-1 那么它将每行显示一张卡片，但我真的希望 md 设置为两张。

Answer 1

你的例子

<576px row-cols-1 此尺寸的一张卡片
≥576px row-cols-sm-1 此尺寸一张卡片
≥768px rows-cols-md-2 两张卡片
≥992px row-cols-lg-3 三张卡片
≥1200px 三张卡片

这是一个在每列中使用 class 的示例。如果您使用框架，您将循环并编写一个简单的 class。 col-md-6 col-lg-4

<div class="container">
    <div class="row ">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
            <div class="col-12 col-md-6 col-lg-4">
            <div class="card ">card</div>
        </div>
        
    </div>
</div>

Answer 2

我很惊讶没有人能够回答这样一个微不足道的问题！

因为您在头脑中遗漏了这个元数据：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

bootstrap row-cols-sm-1 不适用于卡片。当它应该是 1 时，两张卡片出现在单元格屏幕上

bootstrap row-cols-sm-1 does not work with cards. Two cards appear on cell screen when it should be 1

css

row