在引導程式中，如何使我的卡div回應？

我正在做的部分只有 6 張卡片，3 張卡片連續 2 張。當螢屏變小（手機尺寸）時，我希望每張卡片都在自己的行上。當用戶滾動時，每張卡片都會一張一張地顯示出來。

當我調整螢屏大小時，它會以這種方式運行，但是當我使用谷歌工具時，它不會顯示我想要的結果。

.row {
  padding: 4rem;
  background-color: #F8F8FF;
  border: 4px black;
  colour: red;
}

.card {
  background-color: #ddf;
  padding: 30px;
  margin: 20px;
  transition: 0.40s;
}

.card:hover {
  transform: scale(1.05);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container ">
  <h1 class="display-4">My Projects/Work</h1>
  
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card" id="proj1">
        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_1" />

        <div class="card-body">
          <h5 class="card-title">Blog Project</h5>
          
          <p class="card-text">
            A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.
          </p>
          
          <a href="#" class="btn btn-primary">Click to see</a>
        </div>
      </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card" id="proj2">
        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_2" />

        <div class="card-body">
          <h5 class="card-title">Social media clone </h5>
          
          <p class="card-text">
            A social media clone with all the main features of a social media site such as Facebook.In order to achieve this I used Django and React.
          </p>
          
          <a href="#" class="btn btn-primary">Click to see</a>
        </div>
      </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card" id="proj3">
        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_3" />

        <div class="card-body">
          <h5 class="card-title">E-commence site</h5>
          
          <p class="card-text">
            This is a website I build for a small tech company in my local area that specialized in databases .

          </p>
          
          <a href="#" class="btn btn-primary">Click to see</a>
        </div>
      </div>
    </div>
  </div>

uj5u.com熱心網友回復：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以將類放在“行”或“列”上

uj5u.com熱心網友回復：

它按預期作業，您設定col-12 col-md-6 col-lg-4這意味著：

• 默認每行 1 列（低螢屏寬度）
• 螢屏上每行 2 列，寬度 >= 768px (md)
• 螢屏上每行 3 列，寬度 >= 992px (lg)

根據您的描述，您似乎不希望每行 2 列，因此您可以洗掉col-md-6，或者如果您希望在中等螢屏尺寸上每行 3 個專案，請將其更改為col-12 col-md-4.

相關：引導斷點

標籤：htmlcss响应式设计引导程序 5

上一篇：用flexbox和css創建一個圓

下一篇：如果輸入欄位聚焦，如何更改父級的css類