我有 4 张使用 bootstrap 4 的卡片。但是，当我按比例缩小时，这 4 张卡片彼此重叠，而不是在移动设备 View 中先缩减为 2，然后缩减为 1。
我的代码:https://codepen.io/jehc10/pen/LKqRRQ
.navbar-nav {
background: #4287f5;
}
.navbar-brand {
background: #4287f5;
}
.navbar-brand.custom {
color: #FFFFFF;
font-size: 25px
/* border-right:2px solid black; */
}
.navbar {
background: #4287f5;
}
body {
font-family: 'Poppins', sans-serif;
background-image: url("attractive-backdrop-background-988872.jpg");
/* font-weight:700; */
}
.navbar-nav li a {
color: #FFFFFF;
font-size: 20px;
}
.card {
margin-left: 35px;
margin-top: 20px;
background: #f2f2f2;
}
form {
margin-left: 50px;
margin-top: 20px;
background: grey;
border: 2px solid black;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- My stylesheet -->
<link rel="stylesheet" href="website.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<title>Jesse</title>
</head>
<body>
<!-- NAV bar -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand custom" href="#">Jesse</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</nav>
<!-- Portfolio cards -->
<div class=row>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://www.google.ca" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://www.google.ca" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://www.google.ca" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://www.google.ca" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class=row>
<div class=col-lg-6>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>最佳答案
删除内联固定宽度以解决此问题。
<div class="card" style="width: 18rem;">
关于html - 使用网格系统堆叠在一起的卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56974734/