在 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

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

Answer 3

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

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

然后，您将类应用于所有非第一行并调整负顶部值以适合您所需的行空间。这很容易，而且效果更好。 :) 希望对您有所帮助。

Answer 4

更新

Bootstrap 4 有间距实用程序来处理这个https://getbootstrap.com/docs/4.0/utilities/spacing/

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

--

原始答案

如果你使用的是 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，例如

Answer 5

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

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 6

使用：

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