Bootstrap 4 - 以自定义的方式显示卡片 [英] Bootstrap 4 - displaying cards in a custom way
问题描述
我试图创建一个基于Bootstrap 4的合适的语义HTML / CSS,它可以以某种方式呈现卡片元素,而不会增加太多的自定义批量。我到目前为止是这样的:
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< div class =card-body>
< h4 class =card-title>测试2< / h4>
< / div>
< / div>
< / div>
< div class =col-md-4>
< div class =card text-center pt-3 card-simple>
< a href =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< div class =card-body>
< h4 class =card-title> Test 7< / h4>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / section>
看看我的意思: 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
< section class =section d-flex对齐项中心>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< div class =card-body>
< h4 class =card-title>测试2< / h4>
< / div>
< / div>
< / div>
< div class =col-md-4 p-2>
< div class =card text-center pt-3 card-simple>
< a href =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< 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 =#GOclass =click-overlay>< / a>
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt =>
< div class =card-body>
< h4 class =card-title> Test 7< / h4>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / section>
另外,可以使用 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屋!