在Bootstrap3中，如何更改垂直方向上的行之间的距离？

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

如果是我，我会引入新的CSS类，并与未修改的引导行类一起使用。

超文本标记语言

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

使用：

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

Answer 3

而不是添加任何标签，这从来不是一个好的解决方案。您始终可以对所需元素使用margin属性。

您可以在行类本身上添加边距。因此，它将影响全球。

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

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

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

那就用在你想用的地方

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