<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
<div class="card-body">
<h3 class="card-title">Magic Kingdom</h3>
<p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
<a href="#" class="btn btn-primary">Learn More!</a>
</div>
</div>
</div>
</div>
</div>
这里是我的代码,一张卡。我把这段代码粘贴了四次,因为我想要4张不同的卡片,但是这些卡片是叠在一起的,而不是并排的,我该如何解决?谢谢你的帮助,这真的让我很困扰。
所有的四张卡都应该在一个div的范围内。class="row"
. 卡片互相堆叠在一起是因为你把它们放在不同的行标签里。
<div class="row">
<!-- Card 1 -->
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
<div class="card-body">
<h3 class="card-title">Magic Kingdom</h3>
<p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
<a href="#" class="btn btn-primary">Learn More!</a>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
<div class="card-body">
<h3 class="card-title">Magic Kingdom</h3>
<p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
<a href="#" class="btn btn-primary">Learn More!</a>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
<div class="card-body">
<h3 class="card-title">Magic Kingdom</h3>
<p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
<a href="#" class="btn btn-primary">Learn More!</a>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
<div class="card-body">
<h3 class="card-title">Magic Kingdom</h3>
<p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
<a href="#" class="btn btn-primary">Learn More!</a>
</div>
</div>
</div>
</div>
这取决于你的断点如何。如果你把每张卡都包在一个 col-sm-6
比 col-md-6
div,它可能会将其中的两个包在同一条线上.并且记住。container
和 row
类的宽度为100%,所以卡片必须在它们的内部(内有 row
特别是)。)