可能是新手問題。我正在嘗試創建 2 行，每行 3 個部分。但是由于某種原因，即使我設定了 ，這些部分仍然像 一樣占據盒子基本上我想在里面有 6 個正方形而不是 6 個矩形
根據我的理解，col-lg-4 應該占容器的 33%，因此創建了一行 3 我在這里設定了它，但它似乎不想作業，我不知道為什么
.bookshelf {
background-color: #564E52;
width: 1100px;
height: 700px;
display: flex;
margin: 100px auto 100px auto;
border: 20px solid #7F5822;
}
@media (max-width: 800px){
.bookshelf{
width: 900px;
height: 500px;
}
}
#section1 {
border: 20px solid #7F5822;
}
#section2 {
border: 20px solid red;
}
#section3 {
border: 20px solid purple;
}
#section4 {
border: 20px solid green;
}
#section5 {
border: 20px solid yellow;
}
#section6 {
border: 20px solid pink;
}<!doctype html>
<html>
<head>
<meta lang="en-US">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>penpal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="bookshelf">
<span id="section1" class="col-sm-6 col-lg-4">
</span>
<span id="section2" class="col-sm-6 col-lg-4">
</span>
<span id="section3" class="col-sm-6 col-lg-4">
</span>
<span id="section4" class="col-sm-6 col-lg-4">
</span>
<span id="section5" class="col-sm-6 col-lg-4">
</span>
<span id="section6" class="col-sm-6 col-lg-4">
</span>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
將 .row 類與 .bookshelf 一起使用
uj5u.com熱心網友回復：
所有列都應包含在類“row”的元素中。改變這個：
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="bookshelf">
進入這個：
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="row bookshelf">
基本上我想在里面有 6 個正方形而不是 6 個矩形
使用aspect-ratio: 1 / 1;你的列，使他們平方米，是這樣的：
<span id="section1" class="col-sm-6 col-lg-4" style="aspect-ratio: 1 / 1;">
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360331.html