Materialize中的响应列

Question

我正在使用MaterializeCSS (http://materializecss.com/)，我一直在为网格布局而苦苦挣扎。

假设我有4列的4个内容。如果这些列的内容重叠，我希望它们相应地分成两行。

示例：

[[A][B]] [[C][D]] <-每个字母代表该列的每个内容。如果这些内容开始重叠，我希望它们像这样包装：

[[A][B]]
[[C][D]]

而且，如果我进一步调整窗口大小，并且A和B或C和D开始重叠，我希望每个内容都在单独的“行/行”上：

[A]
[B]
[C]
[D]

我的代码如下所示：

<div class="container">
    <div class="row">
        <div class="col l6 m6 s12">
            <div class="row">
                <div class="col s6">
                    <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                </div>
                <div class="col s6">
                    <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                </div>
            </div>
        </div>
        <div class="col l6 m6 s12">
            <div class="row">
                <div class="col s6">
                    <div>
                        <i style="color: #4267b2" class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
                        <i style="color: #1da1f2; margin-left:10px" class="fa fa-twitter-square fa-3x" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="header-col4 col s6">
                    <a href="#" target="_blank">
                        <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

我尝试了很多方法，但没有一种方法能像我想的那样解决问题。

另外，我想让这些内容垂直和水平居中的父div。

我成功地实现了列的包装，除了第三列和第四列是重叠的，因为图像在父div之外。

谢谢你的帮助！我真的很感激！

Answer 1

嗨，我不知道你想要实现什么..

请看下面的示例代码。

 <div class="container">
    <div class="row">
        <div class="col l6 m6 s12">
            <div class="row">
                <div class="container col l6">
                    <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                </div>
                <div class="container col l6">
                    <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                </div>
            </div>
        </div>
        <div class="col l6 m6 s12">
            <div class="row">
                <div class="container col l6">
                    <a href="#" target="_blank">
                        <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                    </a>
                </div>
                <div class="container header-col4 col l6">
                    <a href="#" target="_blank">
                        <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

我所做的是，我将img的父项更改为col l6。

似乎col s6使它彼此重叠了div。

                     <div class="container col l6">
                        <a href="#" target="_blank">
                            <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
                        </a>
                    </div>

使这些内容垂直和水平居中于父div。我在img父类中添加了一个类(.container)，并添加了flexbox。

.container{
  display: flex;
  align-items: center;
  justify-content: center;
}

希望这能有所帮助。

Answer 2

示例：[A] [C] <-每个字母代表该列的每个内容。如果这些内容开始重叠，我希望它们像这样包装：

[A]

[C]

我觉得你应该试一试

row
 col l3 m6 s6

但仅针对每个div

更新：

<div class="col l3 m6 s6"> <-- like this
  <img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</div>