我試圖與引導程式類并排顯示 4 個 div，但不幸的是，我在中間（每個 div 的右側）獲得了太多空間，并且也沒有與中心對齊。我希望它們居中對齊，中間的空間很小。請幫忙。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</head>
<style>
.student-blocks {
padding: 1rem;
box-shadow: 0 0 10px gray;
max-width: 9rem;
text-align: center;
}
</style>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>uj5u.com熱心網友回復：
所以我有點重新處理你的 HTML 以獲得你想要的結果。為了讓它們在同一行上，我將它們更改.col-3為跨越默認的每行 12 列。12/3 = 每行 4 個。您可以通過將所需的col大小放回col-6每行兩個等來簡單地將其放到新行上。
我flex display在您的容器中添加了一個，justify-content: center以便所有內容都居中。
.student-blocks {
padding: 1rem;
box-shadow: 0 0 10px gray;
max-width: 9rem;
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
/* change padding to change spacing */
div.col-3 {
flex: 0 0 auto;
width: 25%;
padding: 10px;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>您可以簡單地更改paddingCSS 選擇器上的div.col-6，將間距更改為您想要的。
To eliminate spacing just simply make the padding: 0; like so:
.student-blocks {
padding: 1rem;
box-shadow: 0 0 10px gray;
max-width: 9rem;
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
div.col-3 {
flex: 0 0 auto;
width: 25%;
padding: 0px;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>uj5u.com熱心網友回復：
如果您嘗試將 4 個 div 并排放置在一行中，請嘗試以下模板。
<body>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</section>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360341.html