这是我的第一个问题。我试图在CMS Joomla 3中一行制作4列。链接到测试站点：http://www.chmpolska.pl/1。在主页上Joomla模块有8个盒子不再正常工作，我必须制作新模块。我在其他网站http://www.psycholog-pebe.pl上遇到了同样的问题。我试图使用其中一个codepen想法，但我不能在1行中设置4列。 Any1知道如何解决我的问题吗？
.cards {
max-width: 100%;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 15px;
padding: 0.5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card {
position: relative;
margin-bottom: 10px;
padding-bottom: 10px;
background: #fefff9;
color: #363636;
text-decoration: none;
-moz-box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
@media (max-width: 1300px) {
.card {
width: 100%;
}
}
@media (min-width: 700px) {
.card {
max-width: 250px;
margin-right: 5px;
margin-bottom: 20px;
}
.card:nth-child(even) {
margin-right: 0;
}
}
@media (min-width: 980px) {
.card:nth-child(2n) {
margin-right: 20px;
}
.card:nth-child(3n) {
margin-right: 20px;
}
}
.card span {
display: block;
}
.card .card-summary {
padding: 5% 5% 5% 5%;
text-align: justify;
}
.card .card-header {
padding-bottom: 10%;
position: relative;
height: 220px;
overflow: hidden;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
background-color: rgba(255, 255, 255, 0.15);
background-blend-mode: overlay;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
}
.card .card-header:hover, .card .card-header:focus {
background-color: rgba(255, 255, 255, 0);
}
.card .card-title {
background: #d63e52;
text-align: center;
padding: 2.5% 0 2.5% 0;
margin-top: 15px;
color: white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
}
.card .card-title h3 {
font-size: 1em;
line-height: 1.2;
padding: 0 3.5%;
margin: 3.5%;
}
.card:hover, .card:focus {
background: white;
-moz-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
-webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
}
.card:hover .card-title, .card:focus .card-title {
background: #333;
}
card-img-top {
max-width: 100%;
height: 100%;
}
// stop images from breaking out of their bounding boxes.
* {
-moz-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -moz-transform;
-o-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -o-transform;
-webkit-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -webkit-transform;
transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
<div class="cards">
<div class="row">
<a class="card col-md-3" href="http://www.chmpolska.pl/tokarki-karuzelowe">
<span class="card-header" style="background-image: url(http://www.chmpolska.pl/images/headers/sg-8-tokarka-karuzelowa-223x167px.png);">
<span class="card-title">
<h3>Tokarki karuzelowe</h3>
</span>
</span>
<span class="card-summary">
Maszyny budowane w oparciu o materiały i wyposażenie najwyższej jakości - komponenty: Heidenhain - liniały pomiarowe, Siemens – sterowanie, śruby kulowe KSK Kurim, przekładnia ZF Germany.
</span>
</a>
<a class="card col-md-3" href="http://www.chmpolska.pl/prasy-krawedziowe-cnc">
<span class="card-header" style="background-image: url(http://www.chmpolska.pl/images/headers/sg-8-prasa-krawdziowa-cnc-230x167px.jpg);">
<span class="card-title">
<h3>Prasy krawędziowe</h3>
</span>
</span>
<span class="card-summary">
Prasy krawędziowe CNC tureckiej firmy ERMAKSAN wykorzystują podzespoły renomowanych producentów, takich jak: HOERBIGER, BOSCH-REXROTH, ATOS, HYDAC, SIEMENS oraz PILZ.
</span>
</a>
<a class="card col-md-3" href="http://www.chmpolska.pl/prasy-mimosrodowe">
<span class="card-header" style="background-image: url(http://www.chmpolska.pl/images/chm-prasa-mimosrodowa-230x156px.png);">
<span class="card-title">
<h3>Prasy mimośrodowe</h3>
</span>
</span>
<span class="card-summary">
Prasy mimosrodowe przeznaczone są do wszystkich zwykłych prac prasowania na zimno - np. wycinania, przebijania otworów, obcinania, tłoczenia, prostowania, gięcia, ciągnienia płytkiego, nitowania itd.
</span>
</a>
<a class="card col-md-3" href="http://www.chmpolska.pl/prasy-hydrauliczne">
<span class="card-header" style="background-image: url(http://www.chmpolska.pl/images/chm-prasa-hydrauliczna-230x167px.png);">
<span class="card-title">
<h3>Prasy hydrauliczne</h3>
</span>
</span>
<span class="card-summary">
Oferujemy kompletne technologie poprzez dobór oprzyrządowania, wraz z wyborem odpowiedniego typu automatyzacji. Tak, aby otrzymać produkt spełniający najwyższe jakościowe wymagania.
</span>
</a>
</div>