在Bootstrap 3中,如何更改垂直行之间的距离？

Question

我有两行a和b,我认为垂直两行之间的距离太小.

我想让距离更大,我知道我可以通过col-md-offset来改变水平距离 - *.但是如何改变垂直距离？

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <div class="row" id="b">
      <button>..</button>
    <div>

现在我的解决方案是插入h1的标签,我认为它不优雅.

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <h1></h1>
    <div class="row" id="b">
      <button>..</button>
    <div>

它有更优雅的解决方案吗？

Answer 1

而不是添加任何永远不是一个好解决方案的标签.您始终可以使用margin具有所需元素的属性.

您可以在行类本身上添加边距.所以它会影响全球.

.row{
  margin-top: 30px;
  margin-bottom: 30px
}

更新:在所有情况下更好的解决方案是引入一个新类,然后将其与.row类一起使用.

.row-m-t{
  margin-top : 20px
}

然后在任何地方使用它

<div class="row row-m-t"></div>

Answer 2

使用:

<div class="row form-group"></div>

Answer 3

如果是我,我会引入新的CSS类并与未修改的bootstrap行类一起使用.

HTML

<div class="row extra-bottom-padding" id="a">
   <img>...</img>
<div>
<div class="row" id="b">
   <button>..</button>
<div>

CSS

.row.extra-bottom-padding{
   margin-bottom: 20px;
}

Answer 4

如果您使用的是SASS,这就是我通常所做的事情.

.mt-0 {
  margin-top: 0 !important;
}

所以你以后可以使用margin-top-xs例如