【发布时间】：2021-12-23 09:25:02
【问题描述】：
我正在制作卡片（图像）的布局，并希望它们的大小相同。
我想要每行 4 列，每列 1 张卡片。然后我的下一行会有 4 个，以此类推。
我的卡片不是占用每行的 4 列，而是只占用 3 列，然后第四张卡片溢出。
我的这个特定页面的 html 是
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<style>
</style>
</head>
<body>
<nav style="display: grid; justify-content: center">
<ul>
<li><a href="../index.html" class="button">Home</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\software.html">Software</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\serverRoom.html">Server Room</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\equipment.html">Our Equipment</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\wires.html">Cables and Wiring</a></li>
<!-- <li><a href="References">References</a></li> -->
</ul>
</nav>
<div class="container">
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
<div style="justify-items: center;">Unusual Activity</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/accscreenshot.jpg" alt="ACC Doc" />
<div style="justify-items: center;">ACC Guide</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/appearancess.jpg" alt="Appearance Doc" />
<div style="justify-items: center;">Appearance Search</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/encoderss.jpg" alt="Encoder Doc" />
<div style="justify-items: center;">Encoders</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/facialss.jpg" alt="Facial Doc" />
<div style="justify-items: center;">Facial Recognition</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/focusss.jpg" alt="Focus Doc" />
<div style="justify-items: center;">Focus of Attention</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/motionss.jpg" alt="Motion Doc" />
<div style="justify-items: center;">Unusual motion</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/opsss.jpg" alt="Operations Doc" />
<div style="justify-items: center;">MGC Operations</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3">
<!-- placeholder -->
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div class="col-md-3">
<!-- placeholder -->
</div>
</div>
</div>
</body>
</html>
我的 CSS（草率）
body {
height: 100%;
/* width: 100%; */
display: grid;
padding-bottom: 5%;
}
.container{
display: grid;
background-color: lightgrey;
background-size: cover;
/* grid-row-gap: 2em; */
/* padding:3em;
grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
*/
};
/* .row {
display: grid;
padding:3em;
grid-auto-rows: 1fr;
background-color: lightgray;
background-size: cover;
width: fit-content;
} */
.myborder{
border: lightgray 1px solid;
padding: 2px;
}
.label{
font-weight: bolder;
}
img{
width: auto;
height:auto;
border:none;
position: relative;
padding: 1em;
transition:transform 0.25s ease;
}
/* img:hover{
} */
div {
display: grid;
grid-auto-flow: inherit;
}
#roundImage{
border-radius: 20%;
}
li {
display: inline;
/* border-style: solid;
border-width: thin;
border-radius: 15px; */
padding: 5px;
margin:10px;
}
nav {
padding-top: 10%
}
/* change subtitle to h2 */
.subtitle{
font-size:larger;
text-align: center;
font-weight: bolder;
align-self: center;
justify-content: center;
text-decoration:underline
}
h2{
display: grid;
justify-content: center;
font-size: xx-large;
/* padding-bottom: 1em; */
}
h1{
font-size: xxx-large;
text-align: center;
font-weight: bolder;
display: grid;
align-content: center;
justify-content: center;
/* padding-top: 5%;
padding-bottom: 3%; */
}
#noAtts{
box-shadow: none;
}
.rmImg{
padding:2 em;
border-radius: 15%;
}
#longImage{
height:650px;
width:auto;
padding-left: 50%;
}
.appearanceImg{
height:auto;
width:400px;
position: relative;
}
/* Trying to figure out hover overlay */
/* img {
transition:transform 0.25s ease;
} */
img:hover {
-webkit-transform:scale(1.1); /* or some other value */
transform:scale(1.1);
}
.layout{
grid-template-columns: 25%, 25%, 25%, 25%;
grid-template-rows: auto;
}
.centerImage{
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
margin: .5em;
}
[![layout][1]][1]
[1]: https://i.stack.imgur.com/bXidE.jpg
【问题讨论】：
-
"我想要每行 4 列，每列 1 张卡片" .然后你应该制作 col-md-12，并将它们分布在 4 col-md-3 中。
标签： html css twitter-bootstrap bootstrap-5 card