如何将行高限制为特定列的高度？ [Bootstrap]

Question

我有一行有 2 列。我希望行高仅基于第 1 列的内容。如果需要，应截断第 2 列的内容。

  <div class="container">
<div class="row">
  <div class="col-3" style="background-color: yellow;">Lorem, ipsum dolor.</div>
  <div class="col-9" style="background-color: blue;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
</div>

在这个例子中，它发生在一些宽度上，第二列断开，第一列还没有。应该避免这种情况。

背景是第一列中的图像应该始终填满该行的整个高度。第 2 列中的文本是预览文本，如有必要应予以缩短。

Answer 1

将列的内容包裹在绝对位置div，如果你希望它是可滚动的，使用overflow-auto...

<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: yellow;"><img src="//via.placeholder.com/200x50"></div>
        <div class="col-9 position-relative" style="background-color: blue;">
            <div class="position-absolute overflow-auto top-0 bottom-0 start-0 end-0">Lorem ipsum dolor sit amet consectetur, dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
        </div>
    </div>
</div>

https://codeply.com/p/TGtv6KDKvD

另见：

如何将行高限制为特定列的高度？ [Bootstrap]

How can I limit the height of a row to the height of a specific column? [Bootstrap]

html

css

twitter-bootstrap

bootstrap-5