MaterialiseCSS valing-wrapper响应无法正常工作

I am trying to align content in vertical and horizontal middle and also use materializecss columns to have 100% width when the window is on a smaller device and split equally across the window on larger devices:

我试图在垂直和水平中间对齐内容，并且当窗口在较小的设备上时使用materializecss列具有100％的宽度，并且在较大的设备上在窗口上平均分配：

<div class="row valign-wrapper">
    <div class="col s12 l6">
        A
    </div>
    <div class="col s12 l6 valign">
        B
    </div>
</div>

See JSFiddle

见JSFiddle

Unfortunately on smaller devices it just stays split inline. Rather than dropping to a new line.

不幸的是，在较小的设备上它只是保持分体内联。而不是下降到新的一行。

1 个解决方案

#1

Unfortunately on smaller devices it just stays split inline. Rather than dropping to a new line.

不幸的是，在较小的设备上它只是保持分体内联。而不是下降到新的一行。

The reason is that the .valign-wrapper is styled using Flexbox and flex-wrap is not set. This means that .valign-wrapper {flex-wrap: nowrap;} by default flex-wrap value is nowrap , which means it will stays split inline and will cause s12 l6 grid to not work.

原因是.valign-wrapper使用Flexbox设置样式，并且未设置flex-wrap。这意味着.valign-wrapper {flex-wrap：nowrap;}默认情况下，flex-wrap值为nowrap，这意味着它将保持内联分割并导致s12 l6网格不起作用。

To solve your issue what you need to do is to set the flex-wrap of .valign-wrapper to {flex-wrap: wrap;}

要解决您的问题，您需要做的是将.valign-wrapper的flex-wrap设置为{flex-wrap：wrap;}

.valign-wrapper {flex-wrap: wrap;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<div class="row valign-wrapper">
  <div class="col s12 l6">
     <img width="100%" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg">
  </div>
  <div align="center" class="col s12 l6 valign">
     B
  </div>
</div>

Hope this helps

希望这可以帮助

#1