css - 使用媒体断点复制 Bootstrap flexbox 网格系统

Question

我正在寻找flexbox从 Bootstrap 复制网格系统。除了媒体查询部分，一切都很好。列很好地水平堆叠，但是当激活特定的媒体断点时，我想将 div 堆叠在新行上。

我想我可以用 jQuery 做到这一点，但我想先尝试用 pure 来实现它css。我试图查看 Bootstrap 的源文件，但无法理解它。

.row {
  overflow: hidden;
  display: flex;
  width: 100%;
  background-color: burlywood;
  height: auto; 
}

.row > .col {
  padding: 14px;
  border: 2px solid black;
  flex: 1 1 auto; 
}

.col-md-4 {
  padding: 14px;
  border: 2px solid black;
  flex: 1 1 33.33333%; 
  
  @media (max-width: 768px) {
    .col-md-4 {
      //code wanted
  }
}

<div class="row">
    <div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
    <div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
    <div class="col" style="background-color:crimson;">MyColumn 3</div>
    <div class="col" style="background-color:crimson;">MyColumn 4</div>
</div>

内联样式仅用于测试目的。

标签： csssassbootstrap-4

Answer 1

您在另一个css规则中拥有媒体查询声明。

一个简单的解决方案是改变.row自身的堆叠方向。

编辑：

如果你只是想学习，这很好。但是，如果您想在生产中使用它，我建议您只从引导程序中复制网格定义，而不是重新发明轮子。

除此之外，要知道引导程序首先是移动的。你原来的例子不是。我在下面添加的是flex-wrap和通配符*的box-sizing属性。这就是大部分的魔法。

*{box-sizing: border-box;} /* borders will break your layout without this */
.row {
  display: flex;
  width: 100%;
  background-color: burlywood;
  height: auto;
  flex-wrap: wrap; /*this is how columns 'wrap' on smaller devices */
}

.row>.col {
  padding: 14px;
  flex: 1 1 auto;
}

.col-md-4 {
  padding: 14px 0;
  border: 2px solid black;
  width: 100%;
}

@media (min-width: 768px) {/*bootstrap uses media queries for larger screens, not smaller */
  .col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

<div class="row">
  <div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
  <div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
  <div class="col-md-4" style="background-color:crimson;">MyColumn 3</div>
</div>