Добавить расстояние между вертикально уложенными столбцами в Bootstrap 4

к сожалению, не существует хорошего способа управления вертикальным расстоянием между столбцами, которые переходят из горизонтального стека в вертикальный стек в определенных точках останова. Кажется, есть решение, когда форма участвует, но здесь не такая ситуация. Я пробовал это решение, но он не работает, когда есть несколько столбцов, которые переносятся в строку.

чтобы проиллюстрировать мой сценарий, вот структура моего HTML: 

<body>

  <div class="container">

    <div class="row">

      <div class="col-md-4">
        col 1
      </div>

      <div class="col-md-4">
        col 2
      </div>

      <div class="col-md-4">
        col 3
      </div>

      <div class="col-md-4">
        col 4
      </div>

      <div class="col-md-4">
        col 5
      </div>

      <div class="col-md-4">
        col 6
      </div>

    </div>

  </div>

</body>

https://jsfiddle.net/b74a3kbs/6/

при среднем размере устройства (md) и выше я хотел бы, чтобы между двумя "строками" столбцов было расстояние, но не было расстояния выше "первой строки" из 3 столбцов и ни одного Ниже "второй строки" из 3 столбцов. Когда столбцы складываются вертикально ниже среднего размера устройства( md), я хотел бы, чтобы между каждым из столбцов был интервал, но ни один выше первого ребенка и ни один ниже последнего ребенок.

в идеале, решение будет работать независимо от того, сколько столбцов (например, 3, 5, 6, 12) содержатся в строке.

6
bootstrap-4 css3 html5 spacing twitter-bootstrap-4

3 ответов

используйте новый Bootstrap 4 интервал ЖКХ. Например mb-3 добавляет маржу-дно 1rem.
дополнительный CSS не требуется.

http://www.codeply.com/go/ECnbgvs9Ez

<div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        col 1
      </div>
      <div class="col-md-4 mb-3">
        col 2
      </div>
      <div class="col-md-4 mb-3">
        col 3
      </div>
      <div class="col-md-4 mb-3">
        col 4
      </div>
      <div class="col-md-4 mb-3">
        col 5
      </div>
      <div class="col-md-4">
        col 6
      </div>
    </div>
</div>

utils интервалов реагируют, поэтому вы можете применять их для определенных точек останова (т. е.; mb-0 mb-md-3)

если вы хотите решение CSS используйте решение объяснили в соответствующем 3.икс вопрос (это не зависит от использования формы): https://jsfiddle.net/zdLy6jb1/2/

/* css only solution */
[class*="col-"]:not(:last-child){
  margin-bottom: 15px;
}

Примечание:col-lg-4 является посторонним в вашей разметке, так как col-lg-4 col-md-4,
это то же самое, что col-md-4.

19

см. Фрагмент ниже или jsfiddle

он будет работать независимо от того, сколько столбцов у вас есть или строки

первый ( на большом экране ) все строки margin-bottom кроме последнего затем на среднем экране строки не будут иметь никакого поля, а cols будут иметь нижний край, кроме последний col С последние строки

.row {
	margin-bottom:30px;
}
.row:last-child{
	margin-bottom:0;
}
.row [class*="col-"] { 
   border:1px solid red;
}

@media only screen and (max-width: 768px) {
	.row { 
	margin:0
	}
	.row [class*="col-"]  {
		margin-bottom:30px;
	}
	.row:last-child [class*="col-"]:last-child{
		margin-bottom:0;
	}
}
<body>

<h1 class="display-3">
hey
</h1>

  <div class="container">

    <div class="row">

      <div class="col-md-4 col-lg-4">
        col 1
      </div>

      <div class="col-md-4 col-lg-4">
        col 2
      </div>

      <div class="col-md-4 col-lg-4">
        col 3
      </div>
</div>
<div class="row">
      <div class="col-md-4 col-lg-4">
        col 4
      </div>

      <div class="col-md-4 col-lg-4">
        col 5
      </div>

      <div class="col-md-4 col-lg-4">
        col 6
      </div>

    </div>

  </div>

</body>
0

вот как я закончил эту работу:

.row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}
0