В Bootstrap 3, Как изменить расстояние между строками по вертикали?

У меня есть две строки 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>

Есть ли у него более изящное решение?

Ответы

Ответ 1

Вместо добавления любого тега, который никогда не является хорошим решением. Вы всегда можете использовать свойство margin с требуемым элементом.

Вы можете добавить маркер в класс строки. Таким образом, это затронет глобально.

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

Обновление. Лучшим решением во всех случаях было бы ввести новый класс, а затем использовать его вместе с классом .row.

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

Затем используйте его, где хотите

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

Ответ 2

Если бы это был я, я бы представил новый класс 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;
}

Ответ 3

использование:

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

Ответ 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, например

Ответ 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>

Ответ 6

Есть простой способ сделать это. Вы определяете для всех строк, кроме первого, следующий класс со свойствами:

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

Затем вы применяете класс ко всем непервым строкам и корректируете отрицательное верхнее значение, чтобы оно соответствовало вашему желаемому пространству строк. Это легко и работает лучше.:) Надеюсь, что это помогло.