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

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?

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

6 个解决方案

#1

Instead of adding any tag which is never a good solution. You can always use margin property 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 .row class.

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

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

Then use it wherever you want

然后在任何地方使用它

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

#2

use:

使用：

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

#3

If it was me I would introduce new CSS class and use along with unmodified bootstrap row class.

如果是我，我会引入新的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;
}

#4

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-xs for example

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

#5

Use <br> tags

使用
标签

<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>

#6

-5

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.

然后将该类应用于所有非第一行，并调整负顶值以适合所需的行空间。这很简单，工作方式更好。 :)希望它有所帮助。

#1