如何在Materialise Design中設置五列？

我正在使用實現響應html頁面的設計框架。我們可以輕鬆管理連續的2,3,4列。但現在我想連續顯示5列。如何在Materialise Design中設置五列？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 
 

 
    <!-- Compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col l3"> 
 
     <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg"> 
 
     </div> 
 
     <div class="col l3"> 
 
     <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg"> 
 
     </div> 
 
     <div class="col l3"> 
 
     <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg"> 
 
     </div> 
 
     <div class="col l3"> 
 
     <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg"> 
 
     </div> 
 
     <div class="col l3"> 
 
     <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg"> 
 
     </div> 
 
     <div class="col l3"> 
 
     <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg"> 
 
     </div> 
 
     <div class="col l3"> 
 
     <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg"> 
 
     </div> 
 
    </div> 
 
    </div>

我要顯示在連續5個圖像。

來源

2016-09-16 V SH

試試這個HTML和CSS它...

HTML： -

<div class="row-cover"><div class="row-wrap"><div class="row"> 
     <div class="col s2 offset-s1">1</div> 
     <div class="col s2">2</div> 
     <div class="col s2">3</div> 
     <div class="col s2">4</div> 
     <div class="col s2">5</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; } 
}

這個想法對你有用，你可以ch安格響應的至於你的要求是同意的大，中，小屏幕...

來源

2016-09-21 12:01:20 SaurabhLP

只添加該代碼在你的CSS文件：

.l3 { 
     width:20%; 
     float:left; 
     } 

    .l3 img { 
     width:100%; 
     max-width:100%; 
     object-fit:cover; 
     } 

@media screen and (max-width: 768px) { 
    .l3 { 
    width:100%; 
    float:left; 
    } 
}

來源

2016-09-16 07:38:14

有了這個問題的正確和最簡單的辦法是...

<div class="tab col m2 s12 offset-m1"> 
<div class="tab col m2 s12"> 
<div class="tab col m2 s12"> 
<div class="tab col m2 s12"> 
<div class="tab col m2 s12">

顯然是行內

來源

2018-01-31 06:43:57 Marios

如何在Materialise Design中設置五列？

回答

相關問題