Bootstrap: добавить соединение между div

Question

Я пытаюсь добавить соединение (линию) между 2 делениями в середине.

<div class="row">                   
<div class="col-xs-6 col-md-6">
    <div style="background-color:#f39a6f;width:100%;height:100px;">
    ....1
    </div>
</div>  
<div class="col-xs-6 col-md-6">
    <div style="background-color:#ffff00;width:100%;height:100px;">
    ....2
    </div>
</div>      

Спасибо за помощь.

Answer 1

Надеюсь, этот код решит вашу проблему.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="row no-gutters">
        <div class="col-md-3">
          <div class="card bg-success">
            <div class="card-body"></div>
          </div>
        </div>
        <div class="col-md-2">
          <hr>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger">
                <div class="card-body"></div>
              </div>
        </div>
      </div>

Answer 2

Моя идея состоит в том, чтобы соединение (линия) всегда было центром строки при абсолютном / относительном позиционировании с меньшим значением z-index, чем у этих цветовых блоков, так что линия скрыта за блоками, но показана между блоки.

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

Но для демонстрации я буду придерживаться CSS и "жестко кодировать" предварительно сконфигурированные значения из bootstrap .

Структура HTML

<div class="row junction-row">
    <div class="col-6 col-sm-3">
        <div class="block bg-primary"></div>
    </div>
    </div class="col-6 col-sm-4 offset-sm-5">
        <div class="block bg-danger"></div>
    </div>
</div>

CSS

.junction-row {
    height: 6rem;
    position: relative;
}

.junction-row::after {
    content: '';
    position: absolute;
    background-color: var(--danger);
    height: 5%;

    // Default bootstrap row's padding is 1rem.
    // Width = 100% - left padding of the row - right padding of the row
    width: calc(100% - 2rem);

    // Top = total height 100% - the height of the line, and then divide by 2
    // to have the line stay in the center of the row.
    top: calc((100% - 5%) / 2);

    // Left = starting after the row's left padding
    left: 1rem;

    // Any value here, but it needs to be lower than what .block has
    z-index: 1;
}

.block {
    position: relative;
    height: 6rem;
    z-index: 2;
}

Результат

демо: https://jsfiddle.net/davidliang2008/vknor3cz/32/

Answer 3

Я не верю, что вы можете иметь это и иметь размер столбцов по 6 каждый.Я могу придумать 2 способа.Сделайте их 5 и используйте это.Это происходит из их документации по сеточной системе.

https://getbootstrap.com/docs/4.0/layout/grid/

<div class="row justify-content-between">
    <div class="col-5">
        One of two columns
    </div>
    <div class="col-5">
        One of two columns
    </div>
 </div>

Или, если вы не возражаете, что соединение имеет статическую ширину, вы можете сделать это.Эффективное выравнивание ширины стыка и равных сторон по оставшейся ширине.

<div class="row">
    <div class="col">
        1 of 2
    </div>
    <div class="col-auto" style="width:30px"></div>
    <div class="col">
        2 of 2
    </div>
</div>