当它们为移动设备堆叠时，如何在 Bootstrap 卡之间放置空间？答案

【问题标题】：How can I put space between Bootstrap cards when they stack for mobile?当它们为移动设备堆叠时，如何在 Bootstrap 卡之间放置空间？
【发布时间】：2022-01-13 10:48:36
【问题描述】：

我有一些块，在桌面视图中看起来不错，但在移动设备上，它们之间绝对没有空间。

如何强制填充？

谢谢

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-12 col-sm-4 col-lg-2">
  <div class="card">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

请发布 HTML，而不是模板代码。将其与样式表的 CDN 链接一起放入功能性 sn-p 中。调试适当的演示比调试图像要容易得多。并标记您的 Bootstrap 版本。
这能回答你的问题吗？ Bootstrap 4, add space between two card decks

标签： html css twitter-bootstrap

【解决方案1】：

一般情况下，您可以使用Boostrap spacing utilities。对于响应式，您可以尝试mb-md-0 mb-2。当视口很小时，这应该在卡片底部应用边距（否则没有边距）。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-12 col-sm-4 col-lg-2">
  <div class="card mb-2 mb-md-0">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card mb-2 mb-md-0">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card mb-2 mb-md-0">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
</div>

【讨论】：

你真是个天才——谢谢！

【解决方案2】：

在一行中添加它们<div class="row">YOUR CODE HERE</div> 并检查输出，如果没有，然后使用 CSS padding: 15px; 添加更多填充

【讨论】：

行不添加垂直填充，并且 Bootstrap 不需要自定义 CSS。

【解决方案3】：

您不只是为卡片添加垂直边距有什么原因吗？填充不是这项工作的正确工具。

您可以根据需要指定断点，因此它仅适用于移动设备。见https://getbootstrap.com/docs/4.6/utilities/spacing。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-4 col-lg-2">
      <div class="card my-2">
        <div class="card-body">
          <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
            <span><font size=4>{{ x.id }}</font></span>
          </div>

          Not yet started!
          
          <div class="progress sh-3">
            <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
          </div>
        </div>
      </div>

      <div class="card my-2">
        <div class="card-body">
          <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
            <span><font size=4>{{ x.id }}</font></span>
          </div>

          Not yet started!
          
          <div class="progress sh-3">
            <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
          </div>
        </div>
      </div>

      <div class="card my-2">
        <div class="card-body">
          <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
            <span><font size=4>{{ x.id }}</font></span>
          </div>

          Not yet started!
          
          <div class="progress sh-3">
            <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

使用 CSS 媒体查询；

@media (max-width: 800) { 
  padding-bottom: 5px;
}

没有示例代码，很难给出相关示例，但您可以将其与 SASS 一起使用，并且可以在任何样式覆盖中使用。

here's a pretty good previous question 应该可以帮到你。

【讨论】：

Bootstrap 有间距类。无需自定义 CSS。
True bootstrap 多年来一直在努力扩大其对实用程序布局类的覆盖范围，但认为最终用户可能会以某种方式或至少是专有技术来扩展它们并不荒谬。
如果您在项目中复制代码、增加复杂性并浪费资源，这是荒谬的。这个问题是针对 Bootstrap 的，而不是为特定的屏幕尺寸添加填充。
我不明白扩展引导程序的现有断点或调整其中的填充以适应您的需要是如何创建重复代码的。
这个问题没有提到替代断点。你凭空捏造出来的。 SO 很好地涵盖了媒体查询。它们在这里不相关。