Bootstrap 4:具有相同高度和宽度的网格卡 [英] Bootstrap 4: cards as grid with the same height and width
本文介绍了Bootstrap 4:具有相同高度和宽度的网格卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在高度和宽度相同的网格中订购卡片.这些卡将具有不同大小的不同内容.他们还应该每排3个.每行具有不同的高度是可以的，但是行内的高度应该相同.对于整个网格，每张卡的宽度应相同.
< div class ="container">< div class ="row align-items-stretch justify-content-start card-deck">< div class ="card">< div class ="card-body">< div class ="card-text">卡1</div></div></div>< div class ="card">< div class ="card-body">< div class ="card-text">卡1 sasddddddddddddddddd asdd as dasssssssssssssssssssss</div></div></div>< div class ="card">< div class ="card-body">< div class ="card-text">卡1</div></div></div>< div class ="w-100"></div>< div class ="card">< div class ="card-body">< div class ="card-text">卡1</div></div></div>< div class ="card">< div class ="card-body">< div class ="card-text">卡1</div></div></div></div></div> 提琴:
我看到当前小提琴的问题:
- 行之间没有空格
- 卡的每行宽度不同
所以 card-deck 似乎不足以解决问题.有什么简单的方法吗?
解决方案
您可以简单地定义卡片的宽度(在下面的示例中为 style ="width:18rem;" )，然后使用列的 col-auto 类，底部添加空白的 mb-3 (边距底部3个单位).就是这样.
如果要整齐地对齐它们，可以将 justify-content-center 添加到该行中.或者，如果您更喜欢，可以尝试 justify-content-between 类.
我要在下方添加第二个版本...
这是一个工作代码段:
< link rel ="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css完整性=" sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin =" anonymous>< script src ="https://code.jquery.com/jquery-3.2.1.slim.min.js"完整性="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin ="/script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"完整性="sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus4"匿名"></script>< script src ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"完整性="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76>/script>< div class ="container mt-4">< div class ="row">< div class ="col-auto mb-3">< div class ="card" style ="width:18rem;">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< h6 class ="card-subtitle mb-2 text-muted"> Card subtitle</h6>< p class ="card-text">一些简单的示例文本，可建立在卡片标题上并构成卡片内容的大部分.< a href =#" class ="card-link">卡片链接</a>< a href =#" class ="card-link">另一个链接</a></div></div></div>< div class ="col-auto mb-3">< div class ="card" style ="width:18rem;">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< h6 class ="card-subtitle mb-2 text-muted"> Card subtitle</h6>< p class ="card-text">一些简单的示例文本，可建立在卡片标题上并构成卡片内容的大部分.< a href =#" class ="card-link">卡片链接</a>< a href =#" class ="card-link">另一个链接</a></div></div></div>< div class ="col-auto mb-3">< div class ="card" style ="width:18rem;">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< h6 class ="card-subtitle mb-2 text-muted"> Card subtitle</h6>< p class ="card-text">一些简单的示例文本，可建立在卡片标题上并构成卡片内容的大部分.< a href =#" class ="card-link">卡片链接</a>< a href =#" class ="card-link">另一个链接</a></div></div></div>< div class ="col-auto mb-3">< div class ="card" style ="width:18rem;">< div class ="card-body">< h5 class ="card-title">卡片标题</h5>< h6 class ="card-subtitle mb-2 text-muted"> Card subtitle</h6>< p class ="card-text">一些简单的示例文本，可建立在卡片标题上并构成卡片内容的大部分.< a href =#" class ="card-link">卡片链接</a>< a href =#" class ="card-link">另一个链接</a></div></div></div>< div class ="col-auto mb-3">< div class ="card" style ="width:18rem;">< div class ="card-body">< h5 class ="card-title">卡片标题</h5>< h6 class ="card-subtitle mb-2 text-muted"> Card subtitle</h6>< p class ="card-text">一些简单的示例文本，可建立在卡片标题上并构成卡片内容的大部分.< a href =#" class ="card-link">卡片链接</a>< a href =#" class ="card-link">另一个链接</a></div></div></div>< div class ="col-auto mb-3">< div class ="card" style ="width:18rem;">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< h6 class ="card-subtitle mb-2 text-muted"> Card subtitle</h6>< p class ="card-text">一些简单的示例文本，可建立在卡片标题上并构成卡片内容的大部分.< a href =#" class ="card-link">卡片链接</a>< a href =#" class ="card-link">另一个链接</a></div></div></div>< div class ="col-auto mb-3">< div class ="card" style ="width:18rem;">< div class ="card-body">< h5 class ="card-title">卡片标题</h5>< h6 class ="card-subtitle mb-2 text-muted"> Card subtitle</h6>< p class ="card-text">一些简单的示例文本，可建立在卡片标题上并构成卡片内容的大部分.< a href =#" class ="card-link">卡片链接</a>< a href =#" class ="card-link">另一个链接</a></div></div></div></div></div> 第二版:
< link rel ="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css完整性=" sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin =" anonymous>< script src ="https://code.jquery.com/jquery-3.2.1.slim.min.js"完整性="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin ="/script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"完整性="sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXus4"匿名"></script>< script src ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"完整性="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76gt.< gin/script>< div class ="container mt-3">< div class ="row">< div class ="card-deck">< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/abc" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">这是更长的卡片< br>与< br>支持< br>< br>下面的文本作为附加内容的自然导入.此内容稍长.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/bca" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">此卡具有以下支持文字，作为对其他内容的自然导入.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/bb4" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">这是一种较宽的卡片，具有以下支持文字，可自然地引入其他内容.此< br>卡< br>具有< br>< br>内容< br>比< br>第一个< br>显示< br>等高动作.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/54a" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">这是更长的卡片< br>与< br>支持< br>< br>下面的文本作为附加内容的自然导入.此内容稍长.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/f0a" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">此卡具有以下支持文字，作为对其他内容的自然导入.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/aa0" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">这是一种较宽的卡片，具有以下支持文字，可自然地引入其他内容.此< br>卡< br>具有< br>< br>内容< br>比< br>第一个< br>显示< br>等高动作.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/f00" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">这是更长的卡片< br>与< br>支持< br>< br>下面的文本作为附加内容的自然导入.此内容稍长.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/090" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">此卡具有以下支持文字，作为对其他内容的自然导入.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div>< div class ="card mb-4" style ="min-width:18rem; max-width:18rem;">< img class ="card-img-top" src ="https://placehold.it/280x140/ff0" alt =卡片图片上限">< div class ="card-body">< h5 class ="card-title">卡标题</h5>< p class ="card-text">这是一种较宽的卡片，具有以下支持文字，可自然地引入其他内容.此< br>卡< br>具有< br>< br>内容< br>比< br>第一个< br>显示< br>等高动作.< p class ="card-text">< small class ="text-muted">最后更新于3分钟前</small></p></div></div></div></div></div> I'm trying to order cards in a grid with the same height and width. These cards will have different content with different sizes. They should also go by 3 in each row. It is OK for each row to have different height, but the height should be the same within the row. The width of each card should be the same for the whole grid.
<div class="container">
<div class="row align-items-stretch justify-content-start card-deck">
<div class="card">
<div class="card-body">
<div class="card-text">
Card 1
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-text">
Card 1 sasddddddddddddddddd asdd as dassssssssssssssssssssssssss
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-text">
Card 1
</div>
</div>
</div>
<div class="w-100">
</div>
<div class="card">
<div class="card-body">
<div class="card-text">
Card 1
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-text">
Card 1
</div>
</div>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/q9gp76kL/
The result layout I'd like to receive:
I see issues with current fiddle:
- There is no space between the rows
- The cards have different width for each row
So card-deck seems to not enough to do the trick. Is there any easy way around?
解决方案
You can simply define the width of a card (style="width: 18rem;" in the example below) and then use the col-auto class for the columns plus the something like mb-3 (margin-bottom 3 units) for a margin at the bottom. That's it.
And if you wanted to center-align them neatly, you could add the justify-content-center to the row. Or maybe try the justify-content-between class if you like that better.
Edit:
I'm adding a second version further down below...
Here's a working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="container mt-4">
<div class="row">
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
Second version:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="container mt-3">
<div class="row">
<div class="card-deck">
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/abc" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card <br> with <br> supporting <br> text below <br> as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/bca" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/bb4" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This <br> card <br> has <br> even longer <br> content <br> than <br> the first <br> to show <br> that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/54a" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card <br> with <br> supporting <br> text below <br> as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/f0a" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/aa0" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This <br> card <br> has <br> even longer <br> content <br> than <br> the first <br> to show <br> that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/f00" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card <br> with <br> supporting <br> text below <br> as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/090" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
<img class="card-img-top" src="https://placehold.it/280x140/ff0" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This <br> card <br> has <br> even longer <br> content <br> than <br> the first <br> to show <br> that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
这篇关于Bootstrap 4:具有相同高度和宽度的网格卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
