<div class="container"> <div class="row card-deck"> <% for(var i=0;i<campgrounds.length;i++){ %> <div class="card col-12 col-md-4"> <img class="card-image-top" src="<%= campgrounds[i].image %>" style=width:100%;height:350px;> <div class="card-body"> <h3 class="card-title"><%= campgrounds[i].name %></h3> </div> </div> <% }%></div></div>這里“campgrounds”是一個具有 2 個屬性（“name”和圖像源）的字典數組。現在這個數組有 6 個項目，我的 col-md-4 應該以中等及以上的分辨率連續給出 3 個項目。但是，這不起作用，在大/中分辨率下，單行中有 12 個項目。為什么？
1 回答
溫溫醬
TA貢獻1752條經驗 獲得超4個贊
.cardBootstrap 有自己的 flex 屬性，可以覆蓋.col-*
您需要將.card其添加為子 div .col-md-4，然后您將看到結果。
.col-md-4{ margin: 20px auto; } /* Or use my-* classes */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row card-deck">
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
</div>
</div>
- 1 回答
- 0 關注
- 151 瀏覽
添加回答
舉報
0/150
提交
取消