问题描述
我遇到与Materialize CSS列有关的问题。本质上，我希望以下内容呈现如下。
1 2 3 4 5 6
7 8
但是，结果看起来像这样。
1 2 3 4 5 6
7 8
<div class="row">
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
</div>
此后，我发现如果将html（如上所述）隔离到一个新文件中，则不会发生此问题。
给出一个完整图片的示例会有些棘手，因为HTML是使用Django渲染的，但是任何人都可以向我指出可能导致此问题的正确方向。
编辑：如果有任何含义，则为模态。
解决方法
该代码看起来不错，这是您的带有图标的初始代码：https://codepen.io/flyingDonut/pen/qBZrMgm
根据OP的要求进行更新：添加一对自定义的flex类（容器和项）并为其进行换行可以解决img问题：https://codepen.io/flyingDonut/pen/RwaVwjP
代码：
<!DOCTYPE html>
<head>
<title>Edit Profile</title>
<!-- Materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style>
.cc {
display: flex;
flex-direction: row;
justify-content: flex-start !important;
flex-wrap: wrap !important;
}
.cr {
padding: 4px;
}
@media screen and (max-width: 1980px) {
.cr {
flex-basis: 10%;
}
}
@media screen and (max-width: 1600px) {
.cr {
flex-basis: 14.2%;
}
}
@media screen and (max-width: 1300px) {
.cr {
flex-basis: 20%;
}
}
@media screen and (max-width: 800px) {
.cr {
flex-basis: 33.3%;
}
}
@media screen and (max-width: 500px) {
.cr {
flex-basis: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<a href="#test" class="waves-effect waves-light btn modal-trigger">Change Image</a>
<div id="test" class="modal">
<div class="modal-content">
<h4 class="center">Change Profile Avatar</h4>
<div class="cc">
<div class="cr">
<img
id="profilePic1"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic2"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic3"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic4"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic5"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic6"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic7"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic8"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic9"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic10"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic11"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic12"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic13"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic14"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$(".modal").modal();
});
</script>
</body>