MaterializeCSS valing-wrapper 响应不起作用答案

【问题标题】：MaterializeCSS valing-wrapper responsiveness not workingMaterializeCSS valing-wrapper 响应不起作用
【发布时间】：2018-08-04 13:50:15
【问题描述】：

我正在尝试在垂直和水平中间对齐内容，并且当窗口在较小的设备上时，我还使用 materializecss 列来获得 100% 的宽度，并在较大设备上的窗口中平均分割：

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

见JSFiddle

不幸的是，在较小的设备上，它只是保持拆分内联。而不是换行。

【问题讨论】：

标签： html css flexbox material-design materialize

【解决方案1】：

不幸的是，在较小的设备上，它只是保持拆分内联。相当而不是换行。

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

要解决您的问题，您需要做的是将.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>

希望对你有帮助

【讨论】：

这些图片不符合大屏幕。
@maxisme 忘记添加materializecss ..请查看我的更新答案。
不幸的是仍然不起作用。在我的代码 sn-p 中查看 B 是如何垂直对齐的。
我明白了。我已经看过你的代码 sn-p 并且能够解决这个问题。请参阅我更新的答案。希望对您有所帮助。