class="h-100"
的卡片。我的代码的另一个问题是,当我将窗口切成一半时,我的卡会以某种方式伸展。
这是我的html
<div class="col-lg-6 ml-auto">
<section class="blog_w3ls" id="connected">
<div class="container">
<div class="row">
<!-- blog grid -->
<div class="col-lg-4 col-md-6 mt-4">
<div class="med-blog">
<div class="blog-header">
<a href="blog1.html">
<img class="img-fluid" src="image/merah.png" alt="image">
</a>
</div>
<div class="blog-body bg-wh p-4">
<a href="blog1.html" class="blog-title">Dictum porta auris magna umgtdd fos</a>
<p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
se.</p>
</div>
</div>
</div>
<!-- //blog grid -->
<!-- blog grid -->
<div class="col-lg-4 col-md-6 mt-4">
<div class="med-blog">
<div class="blog-header">
<a href="blog2.html">
<img class="img-fluid" src="image/merah.png" alt="image">
</a>
</div>
<div class="blog-body bg-wh p-4">
<a href="blog2.html" class="blog-title">Quis autem vel eum iure reprehdd ende</a>
<p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
se.</p>
</div>
</div>
</div>
<!-- //blog grid -->
<!-- blog grid -->
<div class="col-lg-4 col-md-6 mt-4">
<div class="med-blog">
<div class="blog-header">
<a href="blog4.html">
<img class="img-fluid" src="image/merah.png" alt="image">
</a>
</div>
<div class="blog-body bg-wh p-4">
<a href="blog4.html" class="blog-title">Suscipit labo iosam nisi ut aliquid</a>
<p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
se.</p>
</div>
</div>
</div>
<!-- //blog grid -->
</div>
</div>
</section>
</div>
这是用于CSS
.blog-body{
background-color: white;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
}
a.blog-title {
color: orange;
font-size: 22px;
text-transform: uppercase;
display: inline-block;
margin: 12px 0 16px;
line-height: 1.4;
text-align: center;
}
.blog-body span {
color: #636363;
text-transform: uppercase;
font-size: 12px;
word-spacing: 3px;
letter-spacing: 1px;
display: block;
}
好吧,我只需要使卡片的外观与窗口已满的卡片相同,但我已经尝试过最小宽度的游戏,最终弄乱了所有东西,所以如果你们可以帮助,我急需它]]
我的代码的另一个问题是,当我将窗口切成一半时,我的卡有些伸展。这是我的html
class="h-100"
的卡片。a.blog-title {
color: orange;
font-size: 1vw;
text-transform: uppercase;
display: inline-block;
margin: 12px 0 16px;
line-height: 1.4;
text-align: center;
}
.card-body {
padding: 1.2vw;
/* using view width as font size parameter */
}
.card-body p {
font-size: .9vw;
}
@media(max-width: 980px) {
a.blog-title {
color: orange;
font-size: 18px;
}
.card-body {
padding: 20px;
/* You can change it into pixels here for mobile devices */
}
.card-body p {
font-size: 14px;
/* You can change it into pixels here for mobile devices */
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-6 ml-auto">
<section class="blog_w3ls" id="connected">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 mt-4">
<div class="card h-100">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/250" alt="image">
<div class="card-body">
<a href="blog1.html" class="blog-title">Dictum porta auris magna umgtdd fos</a>
<p class="card-text">Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra se.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card h-100">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/250" alt="image">
<div class="card-body">
<a href="blog1.html" class="blog-title">Quis autem vel eum iure reprehdd ende</a>
<p class="card-text">Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra se.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card h-100">
<img class="card-img-top img-fluid" src="https://via.placeholder.com/250" alt="image">
<div class="card-body">
<a href="blog1.html" class="blog-title">Suscipit labo iosam nisi ut aliquid</a>
<p class="card-text">Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra se.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
class="h-100"
的卡片。