首页 / 技术问答 / Html问答列表 / 问答详情

Html 在 bootstrap 中的弹性项之间添加连接行

我在bootstrap 5中创建了一棵"树"，这是一个可以向下跟踪的项的列表，为此我使用了bootstrap 5和原始的HTML

我有HTML设置为这一点，如下所示;

enter image description here

然而，我希望它们之间有线条，如下图所示；

enter image description here

我曾try 为此创建一些定制的css，但无论我做了什么，这都让我感到困惑，我在 bootstrap 程序文档中也找不到任何关于这方面的内容

HTML支持这一点如下:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>

推荐答案

你可以为你的等级设置一个上界，除了第一层，然后创建一个div来代替你的brs，它被分成父级的数量，每个分区分成两部分，它们之间有边界.这几乎就是您想要的，我们还可以通过添加"之前"级别来进一步增强此解决方案，但我认为这已经是一个很好的概念验证.

.newline {
    height: 30px;
    width: 100%;
}

.pc-50 {
    border-left: 1px solid blue;
    width: 50%;
}

.newline > div div:not(.outsider) {
    border-bottom: 1px solid blue;
}

.pc-33 {
    width: 33.33%;
}

.pc-20 {
    width: 20%;
}

.pc-50.left {
    border-left: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-around first">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-50 left">
        <div class="pc-50 left outsider"></div>
        <div class="pc-50 left"></div>
    </div>
    <div class="d-flex pc-50">
        <div class="pc-50 left"></div>
        <div class="pc-50 left outsider"></div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-50 left">
        <div class="pc-50 left outsider d-flex">
            <div class="pc-50 left outsider"></div>
            <div class="pc-50 left"></div>
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-50 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50 outsider d-flex">
            <div class="pc-50 left"></div>
            <div class="pc-50 left outsider"></div>
        </div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-33 left">
        <div class="pc-50 left outsider d-flex">
            <div class="pc-50 left outsider"></div>
            <div class="pc-50 left"></div>
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-33 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-33 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50 outsider d-flex">
            <div class="pc-50 left"></div>
            <div class="pc-50 left outsider"></div>
        </div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-20 left">
        <div class="pc-50 left outsider">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50 outsider">
        </div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-50 left">
        <div class="pc-50 left outsider d-flex">
            <div class="pc-50 left outsider"></div>
            <div class="pc-50 left"></div>
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-50 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50 outsider d-flex">
            <div class="pc-50 left"></div>
            <div class="pc-50 left outsider"></div>
        </div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-33 left">
        <div class="pc-50 left outsider d-flex">
            <div class="pc-50 left outsider"></div>
            <div class="pc-50 left"></div>
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-33 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-33 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50 outsider d-flex">
            <div class="pc-50 left"></div>
            <div class="pc-50 left outsider"></div>
        </div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-20 left">
        <div class="pc-50 left outsider">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50">
        </div>
    </div>
    <div class="d-flex pc-20 left">
        <div class="pc-50 left">
        </div>
        <div class="pc-50 outsider">
        </div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>

Html相关问答推荐

如何将值从Google Sheets侧边栏中的表单中的输入传递到Google Sheets单元格中使用Textile()

我已经在我的网站上创建了按钮，但我不能让它们正确排列.'

CSS/添加margin—top到嵌入式facebook帖子

为什么这个高度为100%的页面会出现滚动条？

在一行中对齐文本和图标

穿过整个屏幕的旋转线

从网页中提取URL

创建特定的CSS网格布局

有没有一种方法可以提高代码中tailwind 类名的可读性？

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

用由文本制成的边框包围内容

如何修剪 flex： 1 内的垂直文本？

为什么 CSS 网格超出了父级？

如何使用CSS Select 同级元素的：：before伪元素？

如何为某些行具有 rowspan 的表的每个奇数行着色

如何使用 html 和 css 为卡片创建此背景框架

当我希望它只横向滚动时，可滚动菜单也会上下移动

我怎么能有 ：not(.class)：nth-of-type(even)？

focusout() Select 器不适用于搜索框

根据正则表达式 attr 从 read_html 过滤表格

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630