我正在構建一個非常簡單的網頁，它有 6 個 Bootstrap 卡，連續 3 個，然后它應該有 3 個。出于某種原因，它在前兩張牌之間留下了巨大的差距，但在第三張牌之間沒有。
這是它現在的樣子（我已經縮小了所有卡片都可見）：https : //imgur.com/FPBvYN2
這是我的卡片代碼：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-md-4">
<div class="card w-100" style="width: 32rem; height: auto;">
<img class="card-img-top" src="images/duurzaamheid/zuivering.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">Water zuivering</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
<!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 32rem; height: auto;">
<img class="card-img-top" src="images/duurzaamheid/recycle.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">Recyclen van restafval</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
<!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 32rem;">
<img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX XXXXX</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
<!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 32rem;">
<br>
<img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 11111</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
<!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 32rem;">
<br>
<img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 22222</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
<!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 32rem;">
<br>
<img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 33333</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
<!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
</div>
</div>
</div>uj5u.com熱心網友回復：
這可能是因為您正在應用額外的 CSS。在 Bootstrap 中，當涉及到寬度、內邊距或邊距時，你很少需要添加任何 CSS。這一切都可以在您的 HTML 中完成。
首先，幾乎洗掉所有 CSS，包括寬度和高度，看看它是什么樣子。您可能還會發現將前 3 個盒子放在<div >第二個 Row 中用于接下來的 3 個盒子等很方便。
uj5u.com熱心網友回復：
假設您將在此處粘貼的所有代碼包裝在一個
<div class="row">
<!-- your cards here -->
</div>
您需要洗掉行內樣式。這包括你width: 32rem和你height: auto（你出于某種原因只能在一些你的卡？
當您使用 bootstrap 中的 row/col 邏輯時，您不應該宣告寬度，因為它應該是網格的 4/12。定義寬度將打破這一點。
我還建議您將這種型別的代碼（高度、寬度等）放入一個 .css 檔案中，這樣您就可以在一個地方更改這些值，而不是在每張卡片上都這樣做。
uj5u.com熱心網友回復：
你<p>在這里注釋掉了你的結束標簽：
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
<!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
在我洗掉了w-100與您的width: 32rem行內樣式相沖突的錯誤（我洗掉了所有這些）之后，這看起來是正確的。我還添加了我認為您沒有包含在您的問題中的強制性.container和.rowdiv。
請參閱下面的片段：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/duurzaamheid/zuivering.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">Water zuivering</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/duurzaamheid/recycle.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">Recyclen van restafval</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX XXXXX</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<br>
<img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 11111</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<br>
<img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
<br><br>
<div class="card-body">
<h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 22222</h5>
<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/370641.html
上一篇：使用引導程式將導航欄向右對齊