<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”是一個(gè)具有 2 個(gè)屬性（“name”和圖像源）的字典數(shù)組。現(xiàn)在這個(gè)數(shù)組有 6 個(gè)項(xiàng)目，我的 col-md-4 應(yīng)該以中等及以上的分辨率連續(xù)給出 3 個(gè)項(xiàng)目。但是，這不起作用，在大/中分辨率下，單行中有 12 個(gè)項(xiàng)目。為什么？
1 回答
溫溫醬
TA貢獻(xiàn)1752條經(jīng)驗(yàn) 獲得超4個(gè)贊
.cardBootstrap 有自己的 flex 屬性，可以覆蓋.col-*
您需要將.card其添加為子 div .col-md-4，然后您將看到結(jié)果。
.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 關(guān)注
- 185 瀏覽
添加回答
舉報(bào)
0/150
提交
取消