Bootstrap 4 如何在基于内容调整大小的元素内创建引导网格？

我有一个要求，把一个网格内的模态和模态需要的大小的基础上的内容

下面的JSFIDLE显示了基本需求

<div class="pro-modal-outer">
<div class="pro-modal">
<div class="container">
  <div class="row">
    <div class="col-6">
      1 of 2
    </div>
    <div class="col-6">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="field">short</div>
    </div>
    <div class="col-4">
      <div class="field long">
        extra extra long content
      </div>
    </div>
    <div class="col-4">
      <div class="field">long content</div>
    </div>
  </div>  
</div>

第1页，共2页
第2页，共2页
短的
超长内容
长内容

正如您在这里看到的，一列的某些内容溢出到下一列

列宽需要根据内容调整大小，容器宽度需要根据内容调整

在实际情况中，内容将是动态的。任何列都可以包含不同大小的子元素作为内容

所有列也需要获得相等的宽度

---

是否有任何可能的解决方案？

对于“超长内容”使用class=“col-sm-6”，对于长内容使用class=“col-sm-4”，对于短内容使用class=“col-sm-2”，以便相应地调整列宽大小。如果使用自定义类，请尝试使用“%”而不是px来指定宽度。

通过使用%而不是px来调整宽度，然后尝试…

从css代码中删除此内容

.field {
    width: 100px;
}
.field.long {
    width: 250px;
}

您的代码可以正常工作

下面的代码段显示了所需的结果

.pro-modal-outer{
位置：固定；
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.pro-modal{
背景色：#68acff；
填充：20px；
最大宽度：100%；
最小宽度：660px；
}
.行{
背景#f8f9fa；
边缘顶部：20px；
}
.col-4、.col-6{
边框：实心1px#6c757d；
}

引导示例
第1页，共2页
第2页，共2页
短的
超长内容
长内容

谢谢您的回答。但列的内容是动态的，所以不确定哪一列的内容最长。所有列的宽度也应该相等。@Nadeespeiris我刚刚更新了我的答案，请查看，我希望这将有助于解决您的问题。不幸的是，无法删除子元素的大小。我使用具有指定宽度和文本的元素作为内容来演示该问题。它可以是任何元素作为内容。如果你想要固定宽度和3个相等的部分，那么两者都不可能，你必须为其中任何一个妥协。如果您想要固定内容的宽度，第一个解决方案是完美的，如果您想要3个相等的部分，则此编辑的解决方案是完美的。另一个解决方案是，如果您增加框的宽度，但在响应中它看起来不同。不显示相同的视图谢谢您的回答。但在这种情况下，内容是动态的。任何列都可以获得不同大小的子元素作为内容。（对不起，我在问题中没有提到。现在更新）。所有列的宽度也应该相等。这就是为什么我使用col-4