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

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望这有帮助

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

1 个答案: