我使用 Materialize CSS 并想制作一个包含 7 列的网格。计算 2、3、4、6 等很容易,但是 12 不能被整除呢?
我试着按照这个答案为 7 人构建一个:How to set five column in row with Materialize Design?
如何针对 7 列进行调整?这是我目前所拥有的:
<div class="row-cover"><div class="row-wrap"><div class="row">
<div class="col s6 m3 l2 ">1</div>
<div class="col s6 m3 l2">2</div>
<div class="col s6 m3 l2">3</div>
<div class="col s6 m3 l2">4</div>
<div class="col s6 m3 l2">5</div>
<div class="col s6 m3 l2">6</div>
<div class="col s6 m3 l2 ">7</div>
</div></div></div>
CSS
.row div {
height: 20px;
background-color: aquamarine;
}
.row-cover { overflow: hidden; }
.row-wrap { margin: 0 -8.33333%; }
特别适用于大屏,中小型作品如意。但我希望大屏幕将它们全部排成一行,而不是这样,上面的代码看起来如何:
谢谢!!
最佳答案
试试这个 HTML 和 CSS
HTML:
<div class="row-cover">
<div class="row-wrap">
<div class="row centered">
<div class="teal center col s1 offset-s2">1</div>
<div class="blue center col s1">2</div>
<div class="red center col s1">3</div>
<div class="orange center col s1">4</div>
<div class="yellow center col s1">5</div>
<div class="green center col s1">6</div>
<div class="brown center col s1">7</div>
</div>
</div>
</div>
CSS:
.row-cover { overflow: hidden; }
.row-wrap { margin: 0 -8.33333%; }
@media only screen and (max-width: 767px) {
.row-wrap { margin: 0; }
}
.centered{
margin-left: 5%
}
您可以根据需要更改 max-width 的值。
关于html - 如何在 Materialise CSS 中制作 7 列网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51992597/