当我到达某个媒体查询时，如何将 4x3 网格转换为 3x4 网格？

Posted 2023-05-08

【中文标题】当我到达某个媒体查询时，如何将 4x3 网格转换为 3x4 网格？

【英文标题】：How do I convert a 4x3 grid to a 3x4 gird when I reach a certain media query?

【发布时间】：2019-12-12 11:32:26

【问题描述】：

我正在尝试制作一个响应式网格。网格从 4x3 开始，当我达到 720 像素时，我希望它是 3x4 网格。我正在使用 bootstrap 3（这个项目不能使用 bootstrap 4）。现在我可以使用 javascript 来做到这一点，但我想用纯 html 和 css 来做到这一点。

从...出发

A B C D E F G H I J K L

到... @media only screen and (min-width: 720px)

A B C D E F G H I J K L

我意识到您需要在其间添加行，这就是我使用 javascript 动态添加它的原因。当它静态存在时，我不知道该怎么做。

function gridDivideBy(divideNum) 

  $('.myClass').contents().unwrap();
  var $square = $(".square");

  for (let i = 0; i < $square.length; i += divideNum) 
    // Create dynamic div
    let $div = $("<div/>", 
      class: 'myClass row'
    );
    // Wrap all the boxes inside a row and div with myClass
    $square.slice(i, i + divideNum).wrapAll($div);
  


function myFunc(x) 
  if (x.matches) 
    gridDivideBy(4);
   else 
    gridDivideBy(3);
  



var x = window.matchMedia("(min-width: 720px)")
myFunc(x);
x.addListener(myFunc);

.square 
  flex: 1;
  padding: 5px;
  margin: 5px;
  border: 2px solid #eee;
  flex: 1;


.myClass 
  display: flex;
  padding: 5px;
  margin: 4px;
  border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="square-wrapper">
  <div class="col-md-3 square">A</div>
  <div class="col-md-3 square">B</div>
  <div class="col-md-3 square">C</div>
  <div class="col-md-3 square">D</div>
  <div class="col-md-3 square">E</div>
  <div class="col-md-3 square">F</div>
  <div class="col-md-3 square">G</div>
  <div class="col-md-3 square">H</div>
  <div class="col-md-3 square">I</div>
  <div class="col-md-3 square">J</div>
  <div class="col-md-3 square">K</div>
  <div class="col-md-3 square">L</div>
</div>

【问题讨论】：

您是否尝试将col-sm-4 与col-md-3 一起添加？

这给了我 3x4、2x6 和 1x12，但不是我想要开始的 4x3，但是谢谢，我只是不擅长网格。

您可以在容器上使用 display:flex，然后在 .square 上使用 25% 的宽度，然后对

【参考方案1】：

如果您熟悉媒体查询，那么您应该能够调整您的网格，使用 - 我想 - grid-template-rows 和 grid-template-columns。

@media screen and (max-width:720px) 
    .grid-container 
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 1fr 1fr 1fr 1fr;
    

如果有帮助，请告诉我。谢谢你，祝你好运。

【参考方案2】：

尝试使用其他选项为什么？

因为 Bootstrap 3 使用大小为 768px 的第一个断点

超小型设备电话(

但是，如果您真的想使用引导程序，这是您的解决方案（我认为...）

$(window).on("load, resize", function () 
    var viewportWidth = $(window).width();
    if (viewportWidth > 720) 
            $(".col-xs-3").removeClass("col-xs-3").addClass("col-xs-4");
    
        else
            $(".col-xs-4").removeClass("col-xs-4").addClass("col-xs-3");
        
);