bootstrap-4 - 如何在基于内容大小的元素内创建 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/

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

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

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

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

有什么可能的解决方案吗？

标签： bootstrap-4grid

Answer 1

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