Css 如何使用引导创建水平节点分支？

如何在引导中创建类似的内容

我在考虑使用网格布局在每个节点上制作4列。但是中心节点占用的空间比它应该占用的更多

这是靴子

现在看起来是这样的

---

以下是我的想法。它并不完美，但它应该能帮助你走上正轨

更新了代码-现在完全响应

。节点列表{
边缘底部：10px；
溢出：隐藏；
宽度：100%；
填充：0px；
边际：0px；
}
.节点列表li{
列表样式类型：无；
颜色：白色；
文本转换：大写；
字体大小：14px；
宽度：25%；
浮动：左；
位置：相对位置；
文本对齐：居中；
}
.节点列表li p{
颜色：#000；
字体大小：粗体；
}
.节点列表李：之后{
内容：''；
宽度：20px；
高度：20px；
线高：20px；
显示：块；
字号：18px；
颜色：#000；
背景：#fff；
边框：10px实心#000；
保证金：0自动5px自动；
}
.节点列表李：之前{
内容：''；
宽度：100%；
高度：6px；
背景：#000；
位置：绝对位置；
左-50%；
底部：20px；
z指数：-1
}
.节点列表li:第一个子节点：之前{
内容：无；
}

ABC



ABC



ABC



ABC

是否应该只使用引导网格？@hunzaboy不，应用程序只需要使用引导，以便在较小的屏幕上保持响应。所以我想利用boostrap提供的功能。我喜欢这个解决方案，但是我不能使用这个解决方案，因为它使用硬编码值来创建行。是否可以使其宽度足以容纳父容器的宽度？是的，您可以这样做。你需要稍微调整一下代码：）@FlyingGambit:更新了代码并使其响应。同样在codepen上：