- 首页
- 其他开发
- bootstrap 4 card-deck 包含不同宽度的卡片
bootstrap 4 card-deck 包含不同宽度的卡片
[英] bootstrap 4 card-deck containing cards with different width
本文介绍了bootstrap 4 card-deck 包含不同宽度的卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在 bootstrap 4 中使用 card-deck，其中包含不同宽度的卡片.
对于单张卡片，您可以执行以下操作来更改宽度(或使用 class w-25、w-50 或 w-75如果 25%、50% 或 75% 的宽度符合您的需要):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="card"><div class="card-header">Header</div><div class="card-body"><p class="card-text">Lorem ipsum dolor sat amet, consectetur adipisici elit.</p>
<br><div class="card" style="width: 30%"><div class="card-header">Header</div><div class="card-body"><p class="card-text">Lorem ipsum dolor sat amet, consectetur adipisici elit.</p>
<br><div class="card" style="width: 70%"><div class="card-header">Header</div><div class="card-body"><p class="card-text">Lorem ipsum dolor sat amet, consectetur adipisici elit.</p>
对于包含等宽卡片的 card-deck，您可以这样做:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="样式表"/><div class="容器"><h1>等宽的卡片组</h1><div class="card-deck"><div class="card"><div class="card-header">Header</div><div class="card-body"><p class="card-text">Lorem ipsum dolor sat amet, consectetur adipisici elit.</p>
<div class="card"><div class="card-header">Header</div><div class="card-body"><p class="card-text">Lorem ipsum dolor sat amet, consectetur adipisici elit.</p>
<br>
为了让 card-deck 包含不同宽度的卡片，我尝试了这个(没有成功):
注意:卡片以相同的方式显示宽度，即使它们有不同的宽度...
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="card-deck"><div class="card" style="width: 30%"><div class="card-header">Header</div><div class="card-body"><p class="card-text">Lorem ipsum dolor sat amet, consectetur adipisici elit.</p>
<div class="card" style="width: 70%"><div class="card-header">Header</div><div class="card-body"><p class="card-text">Lorem ipsum dolor sat amet, consectetur adipisici elit.</p>
所以很明显我在这里做错了(或者引导程序 4 不支持这个).任何关于如何使用包含不同宽度卡片的 card-deck 的建议?
解决方案
如上所示 在文档中，card-deck 是等宽卡片.如果你想要不同的宽度将卡片包裹在 Bootstrap 网格中...
<div class="row"><div class="col-md-6"><div class="card h-100">...
<div class="col-md-3"><div class="card h-100">...
<div class="col-md-3"><div class="card h-100">...
https://www.codeply.com/go/8qpkLw5Dfv
或者，使用自定义 CSS 来设置卡片组卡片的 flex 基础和最大宽度...
.card-deck .cw-30 {弹性:1 0 30%；最大宽度:30%；}.card-deck .cw-70 {弹性:1 0 70%；最大宽度:70%；}
https://www.codeply.com/go/JiAEZdT0Ob
<小时>相关:Bootstrap 4 卡中不同尺寸的卡-组
I am trying to use a card-deck in bootstrap 4 which contain cards with different width.
For single cards you do the following to change the width (or use class w-25, w-50 or w-75 if the 25%, 50% or 75% width fit your needs):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<br>
<div class="card" style="width: 30%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<br>
<div class="card" style="width: 70%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
</div>
For a card-deck containing cards with equal width you do this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Card Deck with equal width</h1>
<div class="card-deck">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
</div>
<br>
</div>
To have a card-deck containing cards with different width I tried this (without success):
Note: The cards are displayed with equal width even that they have different width...
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="card-deck">
<div class="card" style="width: 30%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<div class="card" style="width: 70%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
</div>
</div>
so obviously I'm doing something wrong here (or bootstrap 4 is not supporting this). any suggestions how to use a card-deck containing cards with different width?
解决方案
As indicated in the docs, the card-deck is equal width cards. If you want different width wrap the cards in the Bootstrap grid...
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card h-100">
...
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
...
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
...
</div>
</div>
</div>
</div>
https://www.codeply.com/go/8qpkLw5Dfv
Or, use custom CSS to set the flex basis and max-width of the card-deck cards...
.card-deck .cw-30 {
flex: 1 0 30%;
max-width: 30%;
}
.card-deck .cw-70 {
flex: 1 0 70%;
max-width: 70%;
}
https://www.codeply.com/go/JiAEZdT0Ob
Related: Cards with different sizes in Bootstrap 4 card-group
这篇关于bootstrap 4 card-deck 包含不同宽度的卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
