- 首页
- 前端开发
- Bootstrap 4 - 以自定义方式显示卡片
Bootstrap 4 - 以自定义方式显示卡片
[英] Bootstrap 4 - displaying cards in a custom way
本文介绍了Bootstrap 4 - 以自定义方式显示卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试基于 Bootstrap 4 创建一个适当的语义 HTML/CSS，该 HTML/CSS 将以某种方式呈现卡片元素，而不会添加太多自定义批量.
到目前为止我所拥有的是:
<div class="容器"><div class="row news-block"><div class="col-md-5"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 1</h4>
<div class="col-md-7"><div class="row"><div class="col-md-4"><div class="card text-center pt-3 card-simple mb-4"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 2</h4>
<div class="col-md-4"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 3</h4>
<div class="col-md-4"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 4</h4>
<div class="col-md-4"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 5</h4>
<div class="col-md-4"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 6</h4>
<div class="col-md-4"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 7</h4>
</节>
一个 Codepen 看看我的意思:https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100
我想达到的目标:
- 所有卡片之间的间距相同(垂直和水平)
- 左侧的大"卡片应与右侧列的 6 张卡片高度相同
- 保持响应
是否有一种很好的bootstrap 4"方式来做到这一点，或者我是否需要大量修改?
此外，我应该将所有内容都包装在 .card-deck 中吗?如果是，为什么?(当卡片水平堆叠在其他自定义组件上时，我使用卡片组).
感谢任何提示.
解决方案
您可以使用 Bootstrap 4 工具类 调整布局...
h-100 使左卡全高以匹配较小的卡p-2 间距(填充)使列之间的间距均匀
https://www.codeply.com/go/CPe58ZHi2u
<div class="容器"><div class="row news-block py-1"><div class="col-md-5 p-2"><div class="card text-center pt-3 card-simple h-100"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 1</h4><div class="col-md-7"><div class="row"><div class="col-md-4 p-2"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 2</h4>
<div class="col-md-4 p-2"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 3</h4>
<div class="col-md-4 p-2"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 4</h4>
<div class="col-md-4 p-2"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 5</h4>
<div class="col-md-4 p-2"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 6</h4>
<div class="col-md-4 p-2"><div class="card text-center pt-3 card-simple"><a href="#GO" class="click-overlay"></a><img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""><div class="card-body"><h4 class="card-title">测试 7</h4>
</节>
此外，如果您想要更大的排水沟，可以使用 p-3 代替 p-2.
I'm trying to create a proper semantic HTML/CSS based on Bootstrap 4 that would present card elements in a certain way without adding too much custom bulk.
What I have so far is this:
<section class="section d-flex align-items-center">
<div class="container">
<div class="row news-block">
<div class="col-md-5">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 1</h4>
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-4">
<div class="card text-center pt-3 card-simple mb-4">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 2</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 3</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 4</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 5</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 6</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 7</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
A Codepen to see what I mean: https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100
What I'd like to achieve:
- the same spacing (Vertical & horizontal) between all cards
- the "big" card on the left should be the same height as the right column with 6 cards
- keep it responsive
Is there a good 'bootstrap 4' way of doing this, or do I need to hack around pretty much?
Also, should I wrap everything in .card-deck and if so, why? (I'm using card-deck for when cards stay horizontally stacked on other custom components).
Any tips appreciated.
解决方案
You can use the Bootstrap 4 utility classes to adjust the layout...
h-100 to make the left card full-height to match the smaller cardsp-2 spacing (padding) to make even gutter between columns
https://www.codeply.com/go/CPe58ZHi2u
<section class="section d-flex align-items-center">
<div class="container">
<div class="row news-block py-1">
<div class="col-md-5 p-2">
<div class="card text-center pt-3 card-simple h-100">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 1</h4>
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-4 p-2">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 2</h4>
</div>
</div>
</div>
<div class="col-md-4 p-2">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 3</h4>
</div>
</div>
</div>
<div class="col-md-4 p-2">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 4</h4>
</div>
</div>
</div>
<div class="col-md-4 p-2">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 5</h4>
</div>
</div>
</div>
<div class="col-md-4 p-2">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 6</h4>
</div>
</div>
</div>
<div class="col-md-4 p-2">
<div class="card text-center pt-3 card-simple">
<a href="#GO" class="click-overlay"></a>
<img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
<div class="card-body">
<h4 class="card-title">Test 7</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Also, p-3 could be used instead of p-2 if you want a larger gutter.
这篇关于Bootstrap 4 - 以自定义方式显示卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
