Html 引导等高列

我试图使两根柱子的高度相等。IRL的内容是动态的。移动堆栈列上的布局（桌面）普通列（每个列的宽度为33%）。我试着用

.row

包装并使用“d-flex”，但没有任何效果

这是一个密码笔：

请帮助我，因为我还不了解Flexbox

.ContractTemplateDetails{
光标：指针；
边框：1px实心#ccc；
填充：2rem！重要；
身高：100%；
}
.ContractTemplateDetails:悬停{
背景色：#E5；
}
.ContractTemplateDetails.checked{
填充：2rem；
背景色：#ccc；
-网络工具包盒阴影：0.25rem 0.25rem 0 0#999；
-莫兹盒阴影：0.25rem 0.25rem 0 0#999；
盒影：0.25rem 0.25rem 0 0#999；
}
.ContractTemplateDetails.contract图像img{
宽度：100%；
}
.ContractTemplateDetails.ContractImage.image占位符{
最大宽度：25%；
}
.合同模板详情.合同价格h2{
字体系列：时代衬线；
}
.ContractTemplateDetails.合同列表{
列表样式：无；
}
.ContractTemplateDetails.ContractList li{
文本对齐：左对齐；
颜色：#666；
字体大小：0.8rem；
}
.ContractTemplateDetails.ContractList李：不是（：第一个孩子）{
页边顶部：1rem；
}
.SamCheckbox{
最小高度：34px！重要；
}
.SamCheckbox.custom-checkbox.custom控件输入{
显示：无；
}
.SamCheckbox.custom-checkbox.custom控件输入~.custom控件指示符{
背景：无；
边框：1px实心#666；
颜色：蓝色；
字体大小：1.6rem；
宽度：36px；
高度：36px；
}
.SamCheckbox.custom-checkbox.custom控件输入~.custom控件指示符：：before{
位置：绝对位置；
顶部：5px；
左：5px；
}
.SamCheckbox.custom-checkbox.自定义控件输入：选中~.自定义控件指示符{
边框：1px实心#666；
背景：无；
}
.SamCheckbox.custom-checkbox.custom控件输入：禁用~.custom控件指示符{
边界：无；
背景：无；
}

合同基础

Lorem ipsum dolor坐在amet Concertetur，告别精英。不妨碍
Lorem ipsum dolor坐在amet Concertetur，告别精英。这是非
Lorem ipsum dolor坐在amet Concertetur，告别精英。不妨碍
Lorem ipsum dolor坐在amet Concertetur，告别精英。禁止非OMFATET af服务AFTALEN

205,00克朗/马里兰州。
合同保险费

Lorem ipsum dolor坐在amet Concertetur，告别精英。这是非
Lorem ipsum dolor坐在amet Concertetur，告别精英。这是非
Lorem ipsum dolor坐在amet Concertetur，告别精英。阻止非mellem服务同步
索姆·恩德文迪格的赔款人，在比伦·冯格勒漂流的《同一天》杂志上，他坐在阿梅特·康塞特图尔（amet Concertetur），阿迪皮斯汀·埃利特（Adipising Elite）。在韦尔克阻止非斯堪的纳维亚人。我的名字叫kan jeg næsten ikke tro！mv。Lorem ipsum dolor坐在amet Concertetur，告别精英。妨碍
非

540,00克朗/马里兰州。

只需删除高度：100%从左栏

.ContractTemplateDetails

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
}

---

flex容器上的两个初始设置是

flex direction:row

和

align items:stretch

这意味着flex容器的子容器将自动共享相同的高度

但是，这仅在子对象上的高度设置为

auto

时有效。如果在子项上定义高度，则会覆盖对齐项目，禁用等高功能

因此，要使列具有相同的高度，请删除flex项上的指定高度：

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
    /* height: 100%; <--- remove this */
}

.ContractTemplateDetails{
光标：指针；
边框：1px实心#ccc；
填充：2rem！重要；
/*高度：100%；谢谢。您还知道为什么列在小视口宽度（又名phone）中超过容器边距吗？我通过将flex container设置为inline（.d-inline-flex）进行了修复，但当我将其设置为“行”（.row）时，这不起作用要有相等的高度。现在列的两侧没有任何边距…为什么？@olefrank，我看不出问题。在小视口大小（手机）中，我没有溢出。也许可以发布一个新的演示，在那里我可以看到问题。