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>

显示为：

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

需要保证金（顶部或底部或两者）

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

如何仅为手机屏幕添加保证金？

Answer 1

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

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

具有自定义CSS边距：

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

，边距仅在xs屏幕上显示。

Answer 2

我有很多这个问题因此我创建了一个名为“mobile-space”的自定义类，我将其添加到只需要在移动设备中使用margin-top的div：

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

就个人而言，我会使用媒体查询进行此路由，而不是像div那样添加不必要的html标记。

Answer 3

Bootstrap 4允许使用hidden-sm-up类，将一个对象从sm切换为xl。

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

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

＆＃34;可用课程＆＃34;

对不起我的英文，：D

Answer 4

只需对首先具有专用移动列大小的所有列应用全局样式：

# 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保持干净。

Answer 5

你走了：

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

假设vcenter是包装这些图像的公共div。

Answer 6

如果您使用的是Bootstrap 4，则可以使用间隔实用程序来做到这一点：

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

此代码说：

xs屏幕的

mb-4边距底部

对于md屏幕，

mb-md-0边距底部0

Answer 7

Bootstrap不提供管理边距或填充的功能，但您可以执行以下操作：jsFiddle link。您将边距设置为具有visible-xs类的div。

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

用css：

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

Answer 8

如果您正在使用bootstrap 4而且您正在使用sass文件（而不仅仅是导入bootstrap 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);
            }
        }
    }
}
}

它会生成一个包含这样的类的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; } }

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

8 个答案: