Bootstrap : 在 div 之间添加一个连接

Question

我正在尝试在中间的 2 个 div 之间添加一个连接点（一条线）。

<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>