Twitter bootstrap 独自创立如何仅为手机屏幕添加底部边距？

我有这个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>

Algunos tecnologias que manejamos
我没有怀孕的必要，一辆车也没有要做的事

它显示为：

但当屏幕大小更改为移动屏幕时，视图为：

需要一个边距（顶部或底部或两者）

我知道我可以将它添加到媒体查询中，但我相信如果我使用bootstrap，我必须使用不太可能的媒体查询

如何仅为手机屏幕添加边距？

给您：

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

---

假设

vcenter

是包装这些图像的常用div。

引导程序不提供管理边距或填充的功能，但您可以执行以下操作：。将边距设置为具有可见xs类的div

<div class="container">
  <div class="row">
  <p>123123</p>
  <div class="xs-margin visible-xs">
  </div>
  <p>asdasdadasd</p>
  </div>
</div>

---

我经常遇到这个问题，所以我创建了一个名为“mobile space”的自定义类，我将其添加到仅在mobile中需要边距顶部的div中：

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

---

就我个人而言，我会通过媒体查询而不是添加不必要的html标记，比如div。

Bootstrap 4允许隐藏sm up类，它可以将一个对象从sm切换到xl

然后，您可以在每个图像列之间添加一列，并添加仅在移动设备中可见的此类

更多信息：

“可用类”

---

对不起，我的英语：D

您可以使用

添加div。visible xs

只显示在xtra小屏幕上，并添加自定义类边距，例如：

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

---

并且边距将仅在xs屏幕上显示。

只需将全局样式应用于所有列，这些列首先具有专用的移动列大小：

# Add global bottom margins to mobile columns except full width
@media all and (max-width: 767px) {
   .col-sm-1, .col-sm-2, .col-sm-3, 
   .col-sm-4, .col-sm-5, .col-sm-6,
   .col-sm-7, .col-sm-8, .col-sm-9,
   .col-sm-10, .col-sm-11 {
      margin-bottom: 20px;
   }
}

---

如果您需要某些列具有备用页边距，只需向这些列添加一个专用类即可。这种方法在大多数情况下保持HTML的干净。

如果您使用的是Bootstrap 4，则可以使用间距实用程序：

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

上面说：

mb-4

：对所有屏幕（xs及以上）使用底部边距大小4

---

mb-md-0

：对于中等（md）屏幕和向上的引导屏幕，使用底部边距大小0。该教程介绍了bootstrap自己的断点。没有理由你不能将这些媒体查询添加到你自己的css中。我希望有一个内置的解决方案，但这对我来说很有用。谢谢这可以简化为：

@media all和（最大宽度：767px）{[class^='col-sm-']{margin bottom:20px；}}

我希望Bootstrap的文档能像这样简洁地解释这一点。

# Add global bottom margins to mobile columns except full width
@media all and (max-width: 767px) {
   .col-sm-1, .col-sm-2, .col-sm-3, 
   .col-sm-4, .col-sm-5, .col-sm-6,
   .col-sm-7, .col-sm-8, .col-sm-9,
   .col-sm-10, .col-sm-11 {
      margin-bottom: 20px;
   }
}

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