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

Question

Мой проект использует Bootstrap, и у меня есть четыре списка данных, которые должны отображаться в отзывчивом виде:

111 222 333 444
111     333  
111

111 333
111 333
111 444
222

111
111
111
222
333
333
444

Поэтому я пытаюсь использовать сетку bootstrap для сделай это. Однако они все еще имеют разрыв между двумя столбцами. Я думаю, это потому, что bootstrap будет синхронизировать c высоту двух столбцов, которые заключены в одну строку.

Вот мой jsfidde: https://jsfiddle.net/5zv0rcf8/

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="row">
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-3">
        111 <br>
        111 <br>
        111 <br>
      </div>

      <div class="col-12 col-lg-6 col-xl-3">
        222<br />
      </div>
      <div class="col-12 col-lg-6 col-xl-3">
        333<br />
        333<br />
        333<br />
      </div>
      <div class="col-12 col-lg-6 col-xl-3">
        444<br />
      </div>
    </div>
  </div>


  <hr>

  <div class="row">
    <div class="col-12 col-xl-6 row">
      <div class="col-12 col-lg-6">

        111 <br>
        111 <br>
        111 <br>
        111 <br>
        111 <br>
        111 <br>
      </div>
      <div class="col-12 col-lg-6">
        222<br />

      </div>
    </div>

    <div class="col-12 col-xl-6 row">
      <div class="col-12 col-lg-6">
        333<br />
        333<br />
      </div>
      <div class="col-12 col-lg-6">
        444<br />
        444<br />
        444<br />
        444<br />
        444<br />
      </div>
    </div>
  </div>

Answer 1

Похоже, вы имеете в виду вертикальный разрыв, который появляется между столбцами, когда они перетекают во второй ряд. Если это так, этот вопрос уже задавался ранее и дает отличный ответ здесь: { ссылка }

Поскольку вы используете Bootstrap, лучше всего использовать встроенный функциональность карт масонства, подобная этой (пример из вышеупомянутого ответа): https://www.codeply.com/go/q03ZHDeSGN

Answer 2

, если вы хотите удалить промежутки между желобами, так что используйте no-gutters для строки div, а также вы можете использовать p-0 с его отступом 0px, и вы можете использовать этот класс с контейнером строки и столбцами div его bootstrap предопределенные классы в bootstrap css лист. и, пожалуйста, следуйте правильной структуре bootstrap по ссылке ниже. https://getbootstrap.com/docs/4.0/layout/grid/

        <div class="row">
            <div class="col-12 col-lg-6 col-xl-3 p-0">
                Column1
            </div>
            <div class="col-12 col-lg-6 col-xl-3 p-0">
                Column2
                <br/> Column2
                <br/> Column2
                <br/> Column2
                <br/>
            </div>
            <div class="col-12 col-lg-6 col-xl-3 p-0">
                Column3
                <br/> Column3
                <br/> Column3 Column3 Column3
            </div>
            <div class="col-12 col-lg-6 col-xl-3 p-0">

                Column4
            </div>
        </div>
    </div>

Answer 3

попробуйте удалить желоба

<div class="row no-gutters">
</div>

Читайте документы здесь - https://getbootstrap.com/docs/4.0/layout/grid/#no -потолки