当引导卡堆叠用于移动时，我如何在引导卡之间留出空间？

Question

我有一些街区，它们在桌面上看上去很好，但在移动平台上，它们之间绝对没有空间。

我怎么才能强迫垫子？

谢谢

​

<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>

​

​

​

​

​

Answer 1

通常，您可以使用靴带间距实用程序。为了响应，您可以尝试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>

​

Answer 2

使用css媒体查询；

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

如果没有示例代码，就很难给出相关的示例，但是您可以在SASS中使用它，并且可以在任何样式的重写中使用。

这是前面一个很好的问题应该对你有帮助。

Answer 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>

​