Question

对措辞不佳的标题表示歉意。这是我的问题：我有一排4列，在台式机上看起来很不错...

looking good on a desktop

...但是在移动设备上看起来确实很糟糕，因为溢出的列之间没有余量。

looking mediocre on mobile

这是我写每一列的方式：

    <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

使用边距类，例如

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

mt-2

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

Answer 2

您可以尝试在最大宽度是屏幕尺寸的地方使用

@media only screen and (max-width:435px){
  .col-sm-6{
  padding:1px;
  margin:1px;
 }
}

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

2 个答案: