【问题标题】:Bootstrap : Add a junction between divBootstrap : 在 div 之间添加一个连接
【发布时间】:2019-10-16 13:06:42
【问题描述】:

我正在尝试在中间的 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>      

感谢您的帮助。

【问题讨论】:

    标签: css bootstrap-4 grid row


    【解决方案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>

    【讨论】:

    • 感谢您的代码。当涉及到移动尺寸时,它必须保持浮动(1,2,3)并且线应该更小(最大30px)
    【解决方案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/

    【讨论】:

    • 完美,块的高度不是固定的,所以我必须想办法保持在中间。当谈到移动尺寸时,我必须为中间...您的回答被 80% 接受。我现在知道这是可能的,我会尝试用 js 来实现...
    【解决方案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>  
    

    【讨论】:

    • 感谢您的回答,但它不会创建 3 个浮动 div ...在这种情况下我需要响应 ...我尝试了 class="col-xs-5 col-md-5" 1和2但是中间太大了...