Responsive design 引导v4卡固定在

我想在桌面设备上设置一个网格，每行3张w-50卡，在较小的设备上每行一张卡

但是，如果用户响应性地缩小浏览器窗口，我希望卡片在桌面上保持相同的宽度，并使它们之间的空间变小，而不是卡片本身变窄

此外，是否可以在桌面上使用w-50卡，但在较小的设备上使用w-75卡

示例代码：

<div class="row">
  <div class="col-sm-12 col-lg-4 " >

    <div class="card w-50 ">

      <div class="card-header">
    Featured
  </div>
      <div class="card-body ">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>

    </div>
  </div>
  <div class="col-sm-12 col-lg-4">
    <div class="card w-50">
      <div class="card-header">
    Featured
  </div>
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
   <div class="col-sm-12 col-lg-4 ">
    <div class="card w-50">
      <div class="card-header">
    Featured
  </div>
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

答案很简单：没有 如果您希望在用户调整窗口大小时卡片保持不变，我认为使用.w-*是不可能的，因为整行的相对宽度百分比为100%。当用户调整窗口大小时，卡会收缩，除非您允许行溢出

出于同样的原因，我不知道你为什么/如何想到可以在桌面设备上连续拥有3张w-50卡。一行最多只能拥有2张w-50卡：100%/50%=2张

要使卡片尽可能保持相同的宽度，您可能必须使用绝对单位，如aspx或rem

较小设备上每行一张卡 这里需要注意的是，默认设置为100%宽度。您可以在每张卡片上添加边距，使其看起来更漂亮：

.卡片.卡片{ 边缘底部：1rem； } 较大设备上每行3张卡 我选择了更大的设备，比如576px和更大的。您可以在那里设置媒体断点，并将.cards显示为flexbox。并为里面的卡设置一个固定的

@介质最小宽度：576px{ .卡片{ 显示器：flex； flex-flow：行nowrap； 证明内容：之间的空间； } .卡片.卡片{ 宽度：13雷姆； } } 如何找到合适的宽度？ 不过，设置正确的卡片宽度是很棘手的。我的2美分：您可能需要为不同的断点设置一个正确宽度的卡，这样卡之间就不会有太多的空间

如果允许溢出怎么办？ 若要强制卡的宽度为50%，并将其中3张卡排成一行，则该行必须溢出。默认情况下，如果没有足够的空间，flexbox子项将收缩。要强制使用50%的宽度，必须通过设置“flex shrink:0；”将其关闭：

@介质最小宽度：576px{ .卡片{ 显示器：flex； flex-flow：行nowrap； 证明内容：之间的空间； } .卡片.卡片{ 宽度：50%； 弹性收缩：0； } } 但在这种情况下，卡与卡之间不可能还有间隙