如何在根据内容确定大小的元素内创建Bootstrap网格？

Question

我有一个要求将网格放入模态内，并且模态需要根据内容的大小进行调整。

下面的jsfiddle显示了基本要求

<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>

https://jsfiddle.net/Nash171/5c1t7dkv/17/

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

列宽需要根据其内容确定大小，容器宽度需要根据其调整。

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

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

对此有任何可能的解决方案吗？

Answer 1

对于“额外的超长内容”，请使用class =“ col-sm-6”；对于长内容，请使用class =“ col-sm-4”；对于简短的内容，请使用class =“ col-sm-2”，以使各列宽度大小相应调整。如果您使用自定义类，请尝试使用“％”代替px。

Answer 2

通过以％（而不是px）提供值来调整宽度，然后尝试...

Answer 3

从您的CSS代码中删除此内容。

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