我有这个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,我必须使用较少的媒体查询。
如何仅为手机屏幕添加保证金?
答案 0 :(得分:6)
您可以使用仅在xtra小屏幕上显示的.visible-xs
添加div并添加您的自定义类边距,例如:
<div class="mobile-margin visible-xs"></div>
具有自定义CSS边距:
.mobile-margin { margin-top: 0px; }
,边距仅在xs屏幕上显示。
答案 1 :(得分:4)
我有很多这个问题因此我创建了一个名为“mobile-space”的自定义类,我将其添加到只需要在移动设备中使用margin-top的div:
@media screen and (max-width: 767px) {
.mobile-space {margin-top:10px;}
}
就个人而言,我会使用媒体查询进行此路由,而不是像div那样添加不必要的html标记。
答案 2 :(得分:2)
Bootstrap 4允许使用hidden-sm-up类,将一个对象从sm切换为xl。
然后,您可以在每个图片列之间添加一列,并添加仅在移动设备中可见的此类。
更多信息:https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
&#34;可用课程&#34;
对不起我的英文,:D
答案 3 :(得分:1)
只需对首先具有专用移动列大小的所有列应用全局样式:
# 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保持干净。
答案 4 :(得分:0)
你走了:
@media (max-width: 480px) {
.vcenter img {
margin-bottom: 10px;
}
}
假设vcenter
是包装这些图像的公共div。
答案 5 :(得分:0)
如果您使用的是Bootstrap 4,则可以使用间隔实用程序来做到这一点:
<div class="mb-4 mb-md-0" ></div>
此代码说:
xs屏幕的 mb-4
边距底部
mb-md-0
边距底部0
答案 6 :(得分:-1)
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;
}
答案 7 :(得分:-1)
如果您正在使用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; } }