html - MaterializeCSS valing-wrapper 响应性不起作用

Question

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

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

参见 JSFiddle

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

Answer 1

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

原因是 .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>

希望对你有帮助