创建响应式网格系统和排序

Question

我为我的应用程序创建了一个简单的部分，该部分包含一行，每行3列，每列3格。

JSFIDDLE：demo

这是它在桌面视图中的外观

这是在小型设备中的外观

到目前为止，这是我尝试过的解决方案，但没有得到我想要的。

HTML                                                                                       

                    </div>
                    <div class="col-md-2 left-top-details_second">

                    </div>

                </div>
             <div class="row subrow_bottom">
                  <div class="col-md-4 left-bottom">

                </div>
                </div>

        </div>

        <div class="col-md-4 middle">
                <div class="row subrow">
                    <div class="col-md-2 left-top-details_first">

                    </div>
                    <div class="col-md-2 left-top-details_second">

                    </div>

                </div>
             <div class="row subrow_bottom">
                  <div class="col-md-4 left-bottom">

                </div>
                </div>

        </div>

        <div class="col-md-4 right">
                  <div class="row subrow">
                    <div class="col-md-2 left-top-details_first">

                    </div>
                    <div class="col-md-2 left-top-details_second">

                    </div>

                </div>
             <div class="row subrow_bottom">
                <div class="col-md-4 left-bottom">

                </div>
                </div>

        </div>

    </div>

    </div>

</section>

CSS

body{
  background: red;

}
#for-her{
height: 1200px;
background: red;
overflow: hidden;
}
.col-md-4 {    
  height: 200px;
    margin: 20px 0px;

}

.left-top-details_first{
    border: 2px solid white;
     height: 200px;
         width: 100%;
}
.left-top-details_second{
border: 2px solid white;
     height: 200px;
         width: 100%;
}

.left-bottom{
    border: 2px solid white;
     height: 200px;
     width: 100%;
}

@media (max-width: 768px){
    .main-row{
    display: flex;
    flex-direction: column;
    }

}

网站的最大宽度应为1240px;

我需要更改以获得我想要的东西吗？任何帮助或建议将不胜感激

Answer 1

很明显，您有3列，每列内部还有2列。因此，您的代码可以像下面这样：

.col{
  border: 1px solid;
  height: 80px;
  margin:5px;
}

.col-12 > div {
  height: 50px;
  background: #fff;
  margin:5px;
}

body {
  background: pink!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您无需手动编辑Bootstrap 4类的默认CSS。

您只需要将所有框嵌套在一行中，然后将类名col-lg-2 col-12添加到每个框即可获得所需的布局。

col-lg-2 col-12将在大屏幕中分配 2列/ 12列（每行6）和 12列/ 12列（平板电脑和手机中为每行1个。

在每个框内添加另一行，并为两个内部框分配类名col-6，并将底部框嵌套在全角框内。

col-6将在所有屏幕尺寸中分配 6列/ 12列（每行2个）的两个内部框。

---

选中此JSFiddle或运行以下代码段，以获得上述内容的实际示例：

body{width: 100%;height: 100%; text-align: center;}
#for-her{
height: 1200px;
width: 100%;
background: red;
overflow: hidden;
}
.col-lg-2 {border: 2px solid white;margin: 10px 0px;}
.col-lg-12 {background-color: #FFF; color: #000;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="for-her">
  <div class="container">
    <div class="row">
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 3

.col{
  border: 1px solid;
  height: 80px;
  margin:5px;
}

.col-12 > div {
  height: 50px;
  background: #000;
  margin:5px;
}

body {
  background: #ccc !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</div>