如何使用Materialize CSS减少div之间的边距

时间:2019-04-10 06:32:34

标签: html css flexbox materialize

我需要减少显示诸如日程安排和联系方式之类的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;
}

我添加一张图片以更好地说明自己。

enter image description here

我想用Materialize CSS来实现

enter image description here

0 个答案:

没有答案