在引导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

use:

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

Answer 3

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

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

UPDATE

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

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

有一个简单的方法。除了第一行之外，您为所有行定义以下带有属性的类:

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

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