Html 在 Bootstrap 3 中，如何更改垂直行之间的距离？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24309721/
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
In Bootstrap 3,How to change the distance between rows in vertical?
提问by wcc526
I have two rows a and b,I think the distance between the two rows in vertical is too small.
我有两排 a 和 b，我认为垂直两排之间的距离太小了。
I want to make the distance more bigger,I know I can change the distance in horizontal by col-md-offset-*.But how to change the vertical distance?
我想让距离更大，我知道我可以通过 col-md-offset-* 改变水平距离。但是如何改变垂直距离？
<div class="row" id="a">
<img> ... </img>
<div>
<div class="row" id="b">
<button>..</button>
<div>
Now my solution is insert a tag of h1,I think it is not graceful.
现在我的解决方案是插入一个h1的标签，我认为它不优雅。
<div class="row" id="a">
<img> ... </img>
<div>
<h1></h1>
<div class="row" id="b">
<button>..</button>
<div>
Does it have more graceful solution?
它有更优雅的解决方案吗？
回答by Sachin
Instead of adding any tag which is never a good solution. You can always use marginproperty with the required element.
而不是添加任何标签，这从来都不是一个好的解决方案。您始终可以将margin属性与所需元素一起使用。
You can add the margin on row class itself. So it will affect globally.
您可以在行类本身上添加边距。所以它会影响全球。
.row{
margin-top: 30px;
margin-bottom: 30px
}
Update: Better solution in all cases would be to introduce a new class and then use it along with .rowclass.
更新：在所有情况下更好的解决方案是引入一个新类，然后将它与.row类一起使用。
.row-m-t{
margin-top : 20px
}
Then use it wherever you want
然后在任何你想要的地方使用它
<div class="row row-m-t"></div>
回答by Ahmad Behjati
use:
用：
<div class="row form-group"></div>
回答by Dasun
If it was me I would introduce new CSS class and use along with unmodified bootstrap row class.
如果是我，我会引入新的 CSS 类并与未修改的引导行类一起使用。
HTML
HTML
<div class="row extra-bottom-padding" id="a">
<img>...</img>
<div>
<div class="row" id="b">
<button>..</button>
<div>
CSS
CSS
.row.extra-bottom-padding{
margin-bottom: 20px;
}
回答by Orlando
UPDATE
更新
Bootstrap 4 has spacing utilities to handle this https://getbootstrap.com/docs/4.0/utilities/spacing/
Bootstrap 4 有间距实用程序来处理这个https://getbootstrap.com/docs/4.0/utilities/spacing/
.mt-0 {
margin-top: 0 !important;
}
--
——
ORIGINAL ANSWER
原答案
If you are using SASS, this is what I normally do.
如果您使用的是 SASS，这就是我通常所做的。
$margins: (xs: 0.5rem, sm: 1rem, md: 1.5rem, lg: 2rem, xl: 2.5rem);
@each $name, $value in $margins {
.margin-top-#{$name} {
margin-top: $value;
}
.margin-bottom-#{$name} {
margin-bottom: $value;
}
}
so you can later use margin-top-xsfor example
所以你以后可以使用margin-top-xs例如
回答by Dan
Use <br>tags
使用<br>标签
<div class="container">
<div class="row" id="a">
<img src="http://placehold.it/300">
</div>
<br><br> <!--insert one, two, or more here-->
<div class="row" id="b">
<button>Hello</button>
</div>
</div>
回答by Den Duka
There's a simply way of doing it. You define for all the rows, except the first one, the following class with properties:
有一种简单的方法可以做到这一点。您为除第一行之外的所有行定义以下具有属性的类：
.not-first-row
{
position: relative;
top: -20px;
}
Then you apply the class to all non-first rows and adjust the negative top value to fit your desired row space. It's easy and works way better. :) Hope it helped.
然后将该类应用于所有非第一行并调整负的最高值以适合所需的行空间。这很容易，而且效果更好。:) 希望它有所帮助。
