将引导添加到css样式的'；表'；

我有一个页面，目前的样式是以引导css为中心的（我使用的是引导3，但如果它有不同的话，可能会升级到4）。我不能让它按照我想要的方式来设计。我不确定这是因为不可能，还是因为我在这方面的技能有限

本质上，页面将显示搜索返回的项目列表。列表的结构是这样的：左侧有一个“黑框”，类别为白色文本；右侧有一个基于文本的链接，通常是一些描述性文本

我已经成功地获得了我想要的90%的功能，而无需使用bootstrap

   display: table;
   display: table-row;
   display: table-column;

这可以在这里看到 这需要一点间距和控制边距等，但有我试图实现的基本内容-在左侧的“单元格”中的背景颜色随着右侧文本的数量而扩展

基本上，结果列表中有两个“列”。左边是一个黑色背景的div，定义返回的项目类型，右边是一个链接和一些关于链接的文本

我已经失去了所有的引导css现在虽然。即使添加一个“容器”也会使“列表”移到中间，而将行和列类添加回中间会完全停止工作

因此，如果你看这个，你可能会看到我的意思（你可能需要扩展显示页面，使其显示为2行）

这是一个有点混乱，结构似乎相当复杂，我，但它一般工作正常。但我被要求做的是将左右列对齐，这样无论有多少文本，它们都会以一种很好的一致对齐方式出现（左侧永远不会超过2行，但右侧在1到6或7之间变化）

有没有一种方法可以使用bootstrap来实现使用“display:table”元素在第一小提琴中产生的效果？

EDIT: 下面介绍如何使用引导程序4实现与小提琴1相同的功能：

.row{
边缘底部：5px；
}
.顶灯{
边际上限：0；
页边距底部：0；
字体大小：正常；
}
#结果容器。容器{
垫面：0.5em；
左侧填充：0px；
右边填充：0px；
}
.头衔{
线高：1米；
字号：1.8em；
填充顶部：0px；
垫底：0px；
}
.柔性包装{
身高：100%；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
}
.盒子{
颜色：白色；
背景色：#333333；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
填充：1.6em0；
-webkit边界半径：4px！重要；
-moz边界半径：4px！重要；
边界半径：4px！重要；
}

文本的样本位
描述文字这是很多非常有趣的文字
带2行的文本示例位
描述文本

谢谢。我不知道bs 4和bs 3有多大不同。我想我现在会重做这个网站，但这可能不是坏事。我继承了引导代码（我自己也没有做太多）因此，我无法回答为什么原始版本如此复杂，尽管我在试图整理它时确实注意到，事情开始分崩离析，所以它可能只是在原始开发人员的部分进行了反复试验。我只使用了display:table，因为我在另一个答案中发现了它，并且似乎可以工作，直到我添加了一些引导，所以我将尝试转换它将站点升级到bs 4，然后使用您的答案。非常感谢。bs 4更易于使用，并且有许多选项可供您在将来可能遇到的潜在问题使用。升级到v4时，您必须注意一些差异，请不要犹豫查看文档，有一个迁移指南。无论如何，欢迎您，不要犹豫投票赞成（赞成）