Bootstrap Grid 系统显示 6 行而不是大屏幕所需的 3 行答案

【问题标题】：Bootstrap Grid system displaying rows of 6 rather than the desired rows of 3 for large screenBootstrap Grid 系统显示 6 行而不是大屏幕所需的 3 行
【发布时间】：2021-12-29 02:21:48
【问题描述】：

可能是一个新手问题。我正在尝试创建 2 行，每行 3 个部分。但是由于某种原因，即使我设置了 class="col-lg-4"，这些部分仍然像 class="col-lg-2" 一样占用盒子基本上我想在里面放 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>

【问题讨论】：

哪个版本的引导程序？最新版本需要this HTML structure

标签： html css twitter-bootstrap grid-system

【解决方案1】：

将 .row 类与 .bookshelf 一起使用

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?

【解决方案2】：

所有列都应包含在具有“行”类的元素中。改变这个：

<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;">

【讨论】：