CSS Bootstrap 3 - 小屏幕上的列上边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22742989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Column top margin on smaller screens
提问by n00b
I have a row with X possible columns.
我有一行可能有 X 列。
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<!-- ... and so on ... -->
</div>
</div>
Now I would like to add margin-top:20pxto all small screen columns and the same margin for big screen columns, if there are more than 4 as that would cause two "rows" to be shown and would therefore require some space between.
现在我想添加margin-top:20px到所有小屏幕列和大屏幕列的相同边距，如果有超过 4 个，因为这会导致显示两个“行”，因此需要一些空间。
Is that somehow possible with only the use of CSS?
仅使用 CSS 就可以实现吗？
回答by Zim
You can use a media query for whenever you want the top margin..
您可以随时使用媒体查询来获得上边距。
@media (max-width: 767px) {
.col-xs-6 {
margin-top:20px;
}
}
P.S. - There is nothing wrong with having the total of .col-*in a .rowexceeding 12 (ie: http://getbootstrap.com/css/#grid-example-mixed). It simply causes a wrap. There are several examples in the docs that use this technique. It's generally not ideal for nested rows.
PS -有没有错与具有总.col-*在.row超过12（即：http://getbootstrap.com/css/#grid-example-mixed）。它只是导致换行。文档中有几个使用此技术的示例。它通常不适合嵌套行。
回答by Ejaz
I needed something similar and following is the solution I came up with. Documenting it for future readers (and myself)
我需要类似的东西，以下是我想出的解决方案。为未来的读者（和我自己）记录下来
$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);
@for $r from 1 through 10{
@each $res-abbr, $res-vals in $res-list{
@media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
@each $dir-abbr, $dir-name in $dir-list{
$x: $r * 5;
.m#{$dir-abbr}-#{$res-abbr}-#{$x}{
margin-#{$dir-name}: #{$x}px;
}
.m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
margin-#{$dir-name}: #{$r}unquote('%');
}
}
}
}
}
This SASS code generates classes along the lines of following
这个 SASS 代码按照以下几行生成类
@media (min-width: 0px) and (max-width: 767px) {
.mt-xs-5 { margin-top: 5px; }
.mt-xs-1p { margin-top: 1%; }
.mr-xs-5 { margin-right: 5px; }
.mr-xs-1p { margin-right: 1%; }
.mb-xs-5 { margin-bottom: 5px; }
.mb-xs-1p { margin-bottom: 1%; }
.ml-xs-5 { margin-left: 5px; }
.ml-xs-1p { margin-left: 1%; }
}
So the content editor can use .mt-xs-10to apply margin-top: 10pxto given element on extra-smallscreen.
所以内容编辑器可以用于.mt-xs-10应用margin-top: 10px到extra-small屏幕上的给定元素。
I hope it helps somebody.
我希望它可以帮助某人。
回答by Muhammad Tanweer
This is an old post but below is a clean solution.
这是一个旧帖子，但下面是一个干净的解决方案。
[class*="col-"] {
margin-bottom: 15px;
}
This works well for some situations but it adds extra, unnecessary margin when it's not needed.
To solve this, we can create a new css class that applies top margin to columns when they get stacked. I create a class named .row-grid
这在某些情况下效果很好，但在不需要时会增加额外的、不必要的余量。为了解决这个问题，我们可以创建一个新的 css 类，当它们堆叠时将顶部边距应用于列。我创建了一个名为的类.row-grid
.row.row-grid [class*="col-"] + [class*="col-"] {
margin-top: 15px;
}
@media (min-width: 1200px) {
.row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
margin-top: 0;
}
}
@media (min-width: 992px) {
.row.row-grid [class*="col-md-"] + [class*="col-md-"] {
margin-top: 0;
}
}
@media (min-width: 768px) {
.row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
margin-top: 0;
}
}
回答by Marco Panichi
I use this simple and clean solution:
我使用这个简单而干净的解决方案：
.row { margin-top: -15px; }
.row > div { margin-top: 15px; }
In that manner, every <div class='col-*-*'>has 15px margin on top, except those on the first row (or, on mobile, except the one on the top).
以这种方式，每个<div class='col-*-*'>顶部都有 15px 的边距，除了第一行的那些（或者，在移动设备上，除了顶部的那个）。
回答by komlenic
This simple solution automatically applies a top margin to all columns except the first, at extra small screen sizes. No special class names or other modifications to HTML or CSS are necessary. (Change the margin-topvalue below to whatever you prefer.)
这个简单的解决方案会自动将顶部边距应用于除第一列之外的所有列，在超小屏幕尺寸下。不需要特殊的类名或对 HTML 或 CSS 的其他修改。（将margin-top下面的值更改为您喜欢的任何值。）
@media (max-width: 767px) {
[class*="col-"]:not(:first-child) {
margin-top: 30px;
}
}
