我需要减少显示诸如日程安排和联系方式之类的div之间的间隔,但是我无法实现。
这是我的代码:
<div class="row">
<div class="col s12 m12 l6 logo center-align">
<img class="responsive-img" src="logo.png" alt="">
</div>
<div class="col s12 m6 l3 d-flex">
<div class="">
<div class="col s12 m2 l2">
<i class="material-icons header-icons">access_time</i>
</div>
<div class="col s12 m10 l10">
<div class="d-flex text">
<span class="title-header">Horario</span>
<span class="header-info-content">Mon-Sat Day: 9am to 7pm</span>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l3 d-flex">
<div class="">
<div class="col s12 m2 l2">
<i class="material-icons header-icons">phone</i>
</div>
<div class="col s12 m10 l10">
<div class="d-flex text">
<span class="title-header">Contacto</span>
<span class="header-info-content">55 6789 7899</span>
</div>
</div>
</div>
</div>
</div>
CSS代码:
i.material-icons {
vertical-align: middle;
}
.d-flex {
display: flex;
justify-content: center;
}
.text {
flex-direction: column;
margin-left: 15px;
}
.header-icons {
font-size: 40px;
}
.title-header {
font-size: 18px;
color: rgb(54, 181, 240);
}
.header-info-content {
font-size: 12px;
color: grey;
}
我添加一张图片以更好地说明自己。
我想用Materialize CSS来实现