Bootstrap。如何僅爲移動屏幕添加底部邊距？

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> 

此顯示爲它：

但是當屏幕尺寸改變爲移動屏幕上的視圖是：

的餘量是需要（頂部或底部或兩者）

I知道我可以添加它與媒體查詢，但我相信，如果我使用引導，我必須使用不太可能的媒體查詢。

如何才能爲移動屏幕添加保證金？

Answer 1

在這裏你去：

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

假設vcenter是常見的div包裹這些圖像。

Answer 2

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 3

我有這樣的問題很多，所以我創建了一個名爲「移動空間」，我加入到那些需要的margin-top僅在移動的div一個自定義類：

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

就個人而言，我會走這條路線與媒體查詢，而不是像divs添加不必要的HTML標記。

Answer 4

如果您正在使用引導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); 
      } 
     } 
    } 
} 
} 

它將生成一個像這樣的類的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; } } 

Answer 5

引導程序4允許隱藏sm-up類，它將一個對象從sm切換到xl。

然後，您可以在每個圖像列之間添加一列，並添加僅在移動設備中可見的類。

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

「可用類」

對不起我的英語水平，：d