问题
I have this HTML code
<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?
回答1:
If you are using Bootstrap 4 you can do it with spacing utilities:
<div class="mb-4 mb-md-0" ></div>
this code says:
mb-4 margin bottom for xs screens
mb-md-0 margin bottom 0 for md screens
回答2:
You can add div with .visible-xs which only display on xtra small screens and add your custom class margin, for example:
<div class="mobile-margin visible-xs"></div>
with custom css margins:
.mobile-margin { margin-top: 0px; }
and the margin will display only for xs screen.
回答3:
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:
@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.
回答4:
Bootstrap 4 allows hidden-sm-up classes, which toggles one object from sm to 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/
"Available classes"
Sorry my english, :D
回答5:
Simply apply a global style to all columns that 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.
回答6:
Here you go:
@media (max-width: 480px) {
.vcenter img {
margin-bottom: 10px;
}
}
Assuming vcenter is the common div wrapping those images.
回答7:
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.
<div class="container">
<div class="row">
<p>123123</p>
<div class="xs-margin visible-xs">
</div>
<p>asdasdadasd</p>
</div>
</div>
with css:
.xs-margin {
margin-bottom: 100px;
}
回答8:
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:
$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:
@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; } }
来源：https://stackoverflow.com/questions/37710038/bootstrap-how-to-add-bottom-margin-for-mobile-screen-only