twitter-bootstrap 引导程序。如何仅为手机屏幕添加底部边距？

Bootstrap. How to add bottom margin for mobile screen only?

提问by angel

I have this HTML code

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

this is displayed as it:

这显示为：

but when screen size is changed to mobile screen the view is it:

但是当屏幕尺寸更改为移动屏幕时，视图是这样的：

a margin is needed (top or bottom or both)

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

I know I could add it with Media queries, but I believe if I am using bootstrap I must to use less posible the media queries.

我知道我可以用媒体查询添加它，但我相信如果我使用引导程序，我必须使用不太可能的媒体查询。

How can I add a margin only for mobile screen?

如何仅为移动屏幕添加边距？

回答by douxsey

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

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

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

This says:

这说：

mb-4: use a bottom margin size of 4 for all screens (xs and up)

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

mb-md-0: use a bottom margin size of 0 for medium (md) screens and up

mb-md-0: 对于中 (md) 屏幕及以上，使用底部边距大小 0

回答by alvseek

You can add div with .visible-xswhich only display on xtra small screens and add your custom class margin, for example:

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

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

with custom css margins:

使用自定义 css 边距：

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

and the margin will display only for xs screen.

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

回答by Rachel S

I have this issue a lot so I created a custom class called "mobile-space" which I add to divs that need a margin-top only in mobile:

我经常遇到这个问题，所以我创建了一个名为“移动空间”的自定义类，我将它添加到只在移动设备中需要边距顶部的 div 中：

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

Personally, I'd go this route WITH a media query rather than adding unnecessary html markup like divs.

就个人而言，我会使用媒体查询来走这条路线，而不是添加像 div 这样不必要的 html 标记。

回答by David

Simply apply a global style to all columnsthat have a dedicated mobile-column-size in the first place:

首先简单地将全局样式应用于所有具有专用移动列大小的列：

# 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;
   }
}

If you need certain columns to have alternative margins, just add a dedicated class to those. This approach keeps the HTML clean in most cases.

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

回答by Evaristo Canul López

Bootstrap 4 allows hidden-sm-up classes, which toggles one object from sm to xl.

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

Then, you can add a column between each image column, and add this class that will be visible only in mobile devices.

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

More info: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

更多信息：https: //v4-alpha.getbootstrap.com/layout/responsive-utilities/

"Available classes"

“可用课程”

Sorry my english, :D

对不起我的英语，:D

回答by AndrewL64

Here you go:

干得好：

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

Assuming vcenteris the common div wrapping those images.

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

回答by user3528269

Bootstrap doesn't provide something for managing margins or paddings, but you could do something like this: jsFiddle link. Where you set the margin to a div with visible-xs class.

Bootstrap 不提供用于管理边距或填充的内容，但您可以执行以下操作：jsFiddle link。在其中将边距设置为带有可见 xs 类的 div。

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

with css:

使用 CSS：

.xs-margin {
    margin-bottom: 100px;
}

回答by WIRN

If you are using bootstrap 4 and you are consuming the sass-files (rather than just importing the bootstrap css) you can use this i wrote when I wanted to solve the same problem:

如果您使用的是引导程序 4 并且您正在使用 sass 文件（而不仅仅是导入引导程序 css），您可以使用我在想解决相同问题时写的：

$class-prefix-list: mt mb; //mr and ml can be added if needed
$breakpoint-direction-list: up down;
$breakpoint-list: xxs xs sm md lg xl;

@mixin spacer-dynamic($breakpoint, $direction, $size, $breakpoint-direction) {
@if($breakpoint-direction == 'up') {
    @include media-breakpoint-up($breakpoint) {
        @if $direction == 'mb' {
            margin-bottom: ($spacer/2) * ($size/2) !important;
        }

        @if $direction == 'mt' {
            margin-top: ($spacer/2) * ($size/2) !important;
        }

        @if $direction == 'mr' {
            margin-right: ($spacer/2) * ($size/2) !important;
        }

        @if $direction == 'ml' {
            margin-left: ($spacer/2) * ($size/2) !important;
        }
    }
}

@else if($breakpoint-direction == 'down') {
    @include media-breakpoint-down($breakpoint) {
        @if $direction == 'mb' {
            margin-bottom: ($spacer/2) * ($size/2) !important;
        }

        @if $direction == 'mt' {
            margin-top: ($spacer/2) * ($size/2) !important;
        }

        @if $direction == 'mr' {
            margin-right: ($spacer/2) * ($size/2) !important;
        }

        @if $direction == 'ml' {
            margin-left: ($spacer/2) * ($size/2) !important;
        }
    }
}
}

@each $breakpoint in $breakpoint-list {
@each $breakpoint-direction in $breakpoint-direction-list {
    @each $direction in $class-prefix-list {
        @for $i from 1 through 5 {
            .#{$direction}-#{$i}-#{$breakpoint}-#{$breakpoint-direction} {
                @include spacer-dynamic($breakpoint, $direction, $i, $breakpoint-direction);
            }
        }
    }
}
}

It will generate a css with classes like this:

它将生成一个带有如下类的 css：

@media (max-width: 1199px) {
 .mb-3-lg-down {
 margin-bottom: 1.125rem !important; } }

@media (max-width: 1199px) {
  .mb-4-lg-down {
margin-bottom: 1.5rem !important; } }