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

我有两排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>

... 
..

---

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

而不是添加任何从来都不是好解决方案的标签。您始终可以对所需元素使用

margin

属性

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

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

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

行

类一起使用

然后在你想去的任何地方使用它

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

---

使用

标记

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

你好

有一种简单的方法。 可以为除第一行以外的所有行定义具有属性的以下类：

.not-first-row
{
   position: relative;
   top: -20px;
}

然后将该类应用于所有非第一行，并调整负的顶部值以适合所需的行空间。这很简单，而且效果更好。：）

---

希望能有所帮助。

更新

引导程序4具有间隔实用程序来处理此问题

--

原始答案

如果您正在使用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;
  }
}

---

因此，您可以稍后使用

margin top xs

例如

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

HTML

使用：

为什么要投否决票
在引导文档中建议使用标记，我认为添加br是个好主意，它比添加h1标记好。但是为什么引导不提供更好的解决方案呢？他们已经定义了col md偏移量，为什么不再次定义rol md偏移量-*呢？
应该用于在文本中保留换行符，其中行的划分非常重要，就像您的示例一样，地址。它不应用于增加间隙，而应使用边距或填充。然而，不幸的是，我的评论对boostrap没有帮助，但它通常适用于CSS/html，从不使用html格式化！HTML用于DOM结构。CSS用于格式化。只是为了澄清，官方引导文档不建议使用
标记在元素之间添加空间。文档使用它们向文本流添加换行符，这是正确的用法。我不会像这样编辑

.row

类，因为

.row

在整个引导3中都使用。最好创建一个新类，如

。row margin

Yes@Dan我同意你的观点，但这取决于需求。如果我想创建每一行类，那么我将使用它，否则我将创建新的。顺便说一句，这只是一个例子。我不认为定义行css是一个好主意，为什么不引导提供更好的解决方案，他们已经定义了col md offset，为什么不再次定义rol md offset-*呢？修改行类是一种反模式，因为它是引导脚手架的基本部分。为此创建一个css类，或者使用其他添加垂直边距的引导类，例如FormGroup。我完全同意你的看法。您可以更进一步，自定义css类名，如.row margin sm、.row margin md、.row margin lg等。。只要在需要的地方插上插头就行了。它对原始的引导框架没有任何伤害-它们只是自定义的帮助器类。可能是最佳解决方案的重复，尽管命名应该遵循引导指南：class=“row-row-gutter”无法相信这一点，添加边距可能非常困难，谢谢。文档如何用行间距显示网格布局一直困扰着我，但事实并非如此：/

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

$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;
  }
}

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

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

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