當Bootstrap卡為移動設備堆疊時，如何在它們之間留出空間？

我有一些塊，在桌面視圖中看起來不錯，但在移動設備上，它們之間絕對沒有空間。

我怎樣才能強制填充？

謝謝

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

通常，您可以使用Boostrap 間距實用程式。對于回應式，您可以嘗試mb-md-0 mb-2. 當視口很小時，這應該在卡片底部應用邊距（否則沒有邊距）。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

使用 css 媒體查詢；

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

沒有示例代碼，很難給出相關的示例，但是您可以將它與 SASS 一起使用，并且可以在您的任何樣式覆寫中使用。

這是一個很好的以前的問題，應該對您有所幫助。

uj5u.com熱心網友回復：

有什么理由不只是為卡片添加垂直邊距？填充不是這項作業的正確工具。

您可以根據需要指定斷點，因此它僅適用于移動設備。請參閱https://getbootstrap.com/docs/4.6/utilities/spacing。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

在一行中添加它們<div >YOUR CODE HERE</div>并檢查輸出，如果沒有，則使用 CSS 添加更多填充padding: 15px;

標籤：html css 推特引导

上一篇：從Bootstrap4遷移到5后，Modal變成灰色

下一篇：帶有foreach回圈的Bootstrap手風琴