使用Bootstrap v4.6，我想知道是否可以访问col的第n个元素以更改其大小。基本上，我想要2张顶部列不相等的卡，以及2张底部列不相等的卡。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<!-- video for setting up SASS: https://www.youtube.com/watch?v=6Ovw43Dkp44 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Nunito&display=swap" rel="stylesheet">
<title>Card Mockup</title>
</head>
<body>
<!-- Cards w/ button below text-->
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4 d-flex">
<div class="card">
<a href="#" class="stretched-link"></a>
<div class="gradient-overlay"></div>
<img class="card-img" src="images/santorini.jpg" alt="gov">
<div class="card-img-overlay text-white d-flex flex-column card-overlay">
<h4 class="card-title">Dynamic Contact Patch Characterization</h4>
<div class="row mx-0 mt-auto btn-group">
<div class="col-10 content">
<p class="card-text">
Get unprecedented insight into the contact patch through accurate and high-resolution contact pressure maps measured at high-speed dynamic conditions.
</p>
</div>
<div class="px-0 pr-1">
<a href="#" class="btn btn-danger btn-block stretched-link">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-4 d-flex">
<div class="card">
<a href="#" class="stretched-link"></a>
<div class="gradient-overlay"></div>
<img class="card-img" src="images/thirdCity.jpg" alt="gov">
<div class="card-img-overlay text-white d-flex flex-column card-overlay">
<h4 class="card-title">Dynamic Contact Patch Characterization</h4>
<div class="row mx-0 mt-auto btn-group">
<div class="col-10 content">
<p class="card-text">
Get unprecedented insight into the contact patch through accurate and high-resolution contact.
</p>
</div>
<div class="px-0 pr-1">
<a href="#" class="btn btn-danger btn-block stretched-link">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-4 d-flex">
<div class="card">
<a href="#" class="stretched-link"></a>
<div class="gradient-overlay"></div>
<img class="card-img" src="images/city.jpg" alt="gov">
<div class="card-img-overlay text-white d-flex flex-column card-overlay">
<h4 class="card-title">Dynamic Contact Patch Characterization</h4>
<div class="row mx-0 mt-auto btn-group">
<div class="col-10 content">
<p class="card-text">
Get unprecedented insight into the contact patch through accurate and high-resolution contact.
</p>
</div>
<div class="px-0 pr-1">
<a href="#" class="btn btn-danger btn-block stretched-link">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of cards with button on bottom -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>css代码：
$theme-colors: (
"primary": #0074d9,
"danger": #ed1c24
);
/* card css/scss */
/* affects the image size of the card */
.card-img {
object-fit: cover;
height: 375px;
width: 100%;
}
/* overlay on card */
.card-overlay {
padding: 20px;
}
/* header for title in card #2 */
.card-title {
font-size: 1.5rem;
}
/* used to add shadow on second card */
.gradient-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0) 100%);
}
/* changing font size for second card */
.card-text {
font-size: 16px;
}
/* defining how card looks */
.card {
font-size: 1em;
overflow: hidden;
border-radius: .27rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 1 1px #d4d4d5;
margin-top: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* defining outside look for both cards */
.card-block {
font-size: 1.2em;
position: relative;
padding: 1em;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
@import "node_modules/bootstrap/scss/bootstrap";
/* line to the left of the text in card #2 */
.content {
border-left: 2px solid #ed1c24;
padding-left: 10px;
width: 80%;
margin-top: 10px;
/* Adjust the value to move the bar down */
margin-bottom: 10px;
/* Add margin to create space at the bottom */
}
/* changing components of header h3 & p for smaller screen sizes */
@media (max-width: 1199.98px) {
.card-text {
font-size: 14px;
}
.card-img {
object-fit: cover;
height: 320px;
width: 100%;
}
}
@media (max-width: 991.98px) {
.card-img {
object-fit: cover;
height: 310px;
width: 100%;
}
.card-text {
font-size: 15px;
}
}
@media (max-width: 767.98px) {
.card-img {
object-fit: cover;
height: 370px;
}
.card-text {
font-size: 13px;
}
}
@media (max-width: 575.98px) {
.card-text {
font-size: 16px;
}
}下面是一张我想要的卡片的图片，如果我有4张卡片的话：https://i.stack.imgur.com/bvvmj.png
如图所示，我希望第一张卡片的尺寸更大（约占页面的67%），第二张卡片约占页面的33%。在此情况下，我希望第三张牌的大小为33%，第四张牌的大小为可能牌的67%。我的最终目标是，当我为卡片添加一个新部分时，它会进入第一个卡片部分，然后第一个部分中的内容会进入第二个部分。
1条答案
按热度按时间kkbh8khc1#
您是否考虑过使用Bootstrap断点？你可以有两行，每行有两个列。
所以会是这样的
col-9和col-4（总共12个）和底部col-4和col-9。
https://getbootstrap.com/docs/4.6/layout/grid/