html - Bootstrap 4——如何在溢出的列之间添加空间

Question

为措辞糟糕的标题道歉。这是我的问题:我有一行 4 列，在台式机上看起来很不错......

...但在移动设备上看起来真的很糟糕，因为溢出的列之间没有边距。

以下是我编写每一列的方式:

    <div class="col-md-3 col-sm-6">
        <h1><i class="fas fa-globe-americas"></i></h1>
        <h4>Boston, Massachusetts, United States of America</h4>
    </div>

如果没有为每个屏幕尺寸编写完全独立的网格，是否有任何方法可以使溢出的列看起来不错？我希望每列之间有一些空白。

这是完整的 CSS 代码，希望对您有帮助。

/* this CSS sheet applies to my home page 
I am using a color scheme from this fantastic article
https://www.canva.com/learn/100-color-combinations/
#375e97  rgba(55, 94, 151, 0.2) sky -- a deep blue
#fb6542  rgba(251,101,66,1) sunset -- a salmon color
#ffbb00  rgba(255,187,0,1) sunflower -- yellow
#3f681c  rgba(63,104,28,1) grass -- dark green
*/
body{
    font-size: 1rem;
    color:#3f681c;
    font-family: Kalam, sans-serif;
    background-color: #e2E8e4;
    line-height: 1.5;

}

a:hover{
    text-decoration:none;
}

hr{
    height:0.08rem;
    margin-bottom: 2rem;
    background-color: #3f681c;
    border-radius: 0.5rem;
}

.row__marginb{
    margin-bottom: 1rem;
}

.jumbotron{
    line-height: 2;
}

#mainJumbotron{
    height: 55vh;
    background-position: 50% 50%;
    background-size:cover;
    background-image:radial-gradient(rgba(55, 94, 151, 0.2), rgba(51, 107, 135, 0.0)), url("/static/home/img/august.jpg");
    border-radius: 0 0 1rem 1rem;
    clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 92% 100%, 8% 100%, 0% 92%);
}

.nameTitle{
    font-family: Pacifico, serif;
    color:#fdf6f6;
    font-size: 5rem;
}

.mainSubtitle{
    font-family: Patua One, serif;
    color:#fdf6f6;
    font-size:1.5rem;
}

.profilepic{
    border-radius: 3rem;
}

.btn-socialmedia:link,.btn-socialmedia:visited{
    box-sizing:border-box;
    height:5rem;
    width:5rem;
    padding:0.4rem 0.6rem 0.3rem 0.6rem;
    border-radius:0.5rem;
    background-color: #3f681c;
    color:#fdf6f6;
    position:relative;
    bottom:0rem;
    transition: bottom 0.15s ease-in-out;
}

.btn-socialmedia:hover{
    color:#fdf6f6ec;
    bottom:0.2rem;
}

.btn-socialmedia:active{
    bottom:0.1rem;
}

.footer{
    color:#fdf6f6;
    background-image: radial-gradient(rgba(55, 94, 151, 1), rgb(10, 96, 139));
    padding-top:1rem;
    clip-path: polygon(8% 0%, 92% 0%, 100% 92%, 100% 100%, 0% 100%, 0% 92%);
}

.flagImage{
    height: 1.5rem;
    width: 2.2rem;
    border-radius: 0.2rem;
}

这是相关的 HTML

    <div class="row text-center row__marginb">
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-scroll"></i></h1>
            <div class="row">
                <div class="col-6">
                    <h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_Resume.pdf' %}"
                            download>Resume</a> </h5>
                </div>
                <div class="col">
                    <img class="flagImage" src="{% static 'home/img/america.png' %}">
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV.pdf' %}" download>CV</a>
                    </h5>

                </div>
                <div class="col">
                    <img class="flagImage" src="{% static 'home/img/america.png' %}">
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV_italiano.doc' %}"
                            download> CV</a> </h5>

                </div>
                <div class="col">
                    <img class="flagImage" src="{% static 'home/img/italy.png' %}">
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-laptop"></i> </h1>
            <a class="btn-socialmedia" href="https://www.facebook.com/jsbordone" target="_blank"><i class="fab fa-facebook"></i></a>
            <a class="btn-socialmedia" href="https://www.linkedin.com/in/jimmy-sbordone-aaa806128/" target="_blank"><i
                    class="fab fa-linkedin-in"></i></a>
            <a class="btn-socialmedia" href="https://github.com/JimmySbordoneJr" target="_blank"><i class="fab fa-github"></i></a>
        </div>
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-envelope"></i> </h1>
            <h3>jsbordon@bu.edu</h3>
        </div>
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-globe-americas"></i></h1>
            <h4>Boston, Massachusetts, United States of America</h4>
        </div>
    </div>
</div>

Answer 1

使用边距类，例如

mt-xs-2 用于 xs 媒体查询的 .5rem 上边距或者只是 mt-1 或 mt-2 用于任何媒体查询。

 <div class="col-md-3 col-sm-6 mt-xs-2">
       <h1><i class="fas fa-globe-americas"></i></h1>
        <h4>Boston, Massachusetts, United States of America</h4>
 </div>

更多信息在 https://getbootstrap.com/docs/4.2/utilities/spacing/