引导.如何仅为手机屏幕添加下边距？

Question

我有这个HTML代码

<div class="row">
            <div class="col-xs-12">
                <div class="titulo">
                    <h2 class="title-section font-switch">Algunos tecnologias que manejamos</h2>
                    <span>Si no vez el que necesitas pregunta, a veces no ponemos todos</span>
                </div>


            </div>
            <div class="col-xs-12 col-sm-8 col-sm-offset-2">
                <div class="row center">
                    <div class="col-xs-10 col-xs-offset-1 col-sm-3 col-sm-offset-0  vcenter">

                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/csharp.png" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="col-xs-10 col-xs-offset-1 col-sm-3 col-sm-offset-0  vcenter">


                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/java.jpg" class="img-responsive" alt="">
                        </a>
                    </div>

                    <div class="col-xs-10 col-xs-offset-1 col-sm-3  col-sm-offset-0  vcenter">

                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/cmasmas.png" class="img-responsive" alt="">
                        </a>

                    </div>

                    <div class="col-xs-10 col-xs-offset-1 col-sm-3  col-sm-offset-0  vcenter">

                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/androidstudio.png" class="img-responsive" alt="">
                        </a>



                    </div>



                </div>
            </div>


        </div>

这显示为:

但是当屏幕尺寸更改为移动屏幕时,视图是:

需要保证金(顶部或底部或两者)

我知道我可以添加媒体查询,但我相信如果我使用bootstrap我必须使用较少的媒体查询.

如何仅为移动屏幕添加保证金？

Answer 1

您可以添加.visible-xs仅在xtra小屏幕上显示的div 并添加自定义类边距,例如:

<div class="mobile-margin visible-xs"></div>

使用自定义css边距:

.mobile-margin { margin-top: 0px; }

并且边距仅显示xs屏幕.

Answer 2

我经常遇到这个问题，因此我创建了一个自定义类“ mobile-space”，将其添加到仅在移动设备中需要边距顶端的div中：

@media screen and (max-width: 767px) {
.mobile-space {margin-top:10px;}
}

就个人而言，我会通过媒体查询走这条路，而不是像divs那样添加不必要的html标记。

Answer 3

If you are using Bootstrap 4 you can do it with spacing utilities:

 <div class="mb-4  mb-md-0" ></div>

this code says:

mb-4 margin bottom for xs screens

mb-md-0 margin bottom 0 for md screens

Answer 4

干得好：

@media (max-width: 480px) {
    .vcenter img {
        margin-bottom: 10px;
    }
}

假设vcenter是包装这些图像的通用 div。