我试图在垂直和水平中间对齐内容,同时使用 materializecss当窗口在较小的设备上时,列具有 100% 的宽度,而在较大的设备上,列在窗口中平均分配:
<div class="row valign-wrapper">
<div class="col s12 l6">
A
</div>
<div class="col s12 l6 valign">
B
</div>
</div>
参见 JSFiddle
不幸的是,在较小的设备上,它只是保持内联拆分。而不是换行。
最佳答案
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>
希望对你有帮助
关于html - MaterializeCSS valing-wrapper 响应性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48965923/