Bootstrap 4当第一列有大量文本时，如何将第二列推到下一行

Question

我非常接近，但唯一的问题是第一个col中的长文本没有换行。它溢出了它的父“行”。

https://www.bootply.com/qMLny5rRIW#

back_prop

在bootply示例中，具有最小文本的第一行看起来很完美。 Col 2停留在col 1旁边的同一行。第二行非常接近，但这是我的问题。 Col 2下到下一行，这就是我想要的，但col 1不会包裹并溢出它的行。如何将col 1中的文本换行？

Answer 1

您正在寻找Bootstrap 4.1中添加的Flexbox Grow & shrink utility classes。使用flex-shrink-1会告诉col-auto＆＃34;缩小＆＃34;根据需要，但不会溢出父.row：

https://www.bootply.com/TFE5hRTYcD

<div class="container">
  <div class="row ">
    <div class="col-auto flex-shrink-1 bg-success">Lots of text - asdfd adf adf  adf akljl;kj  adffdaasd kj; jad adsfasdf adsf;kj ...</div>
    <div class="col bg-warning text-right">pushed to other line</div>
  </div>
</div>

Codeply demo