css - Bootstrap 4 当第一列有很多文本时如何将第二列推到下一行

Question

我已经很接近了，但唯一的问题是第一列中的长文本没有换行。它溢出了它的父“行”。

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

<div class="container">
  <div class="row ">
    <div class="col-auto bg-success">Lots of text - asdfd adf adf  adf akljl;kj  adffdaasd kj; jad adsfasdf adsf;kj  asdfasdf a sdf adf asdf adf kl;j ;lk j jk;;j ;kl j j;k ;lj ; jklj ;jk ;j ;j  ;jk ;j k;k  ; ;kjasdfasdfj;k asdfasdf asdfasdf asdf asdfasdfasdf</div>
    <div class="col bg-warning text-right">pushed to other line</div>
  </div>
  <div class="row">
    <div class="col-auto bg-success">small amount of text</div>
    <div class="col bg-warning text-right">same line</div>
  </div>
</div>

在 bootply 示例中，具有最少文本的第一行看起来很完美。第 2 列位于同一行，紧邻第 1 列。第二行非常接近，但这是我的问题。 Col 2 下降到下一行，这就是我想要的，但 col 1 不换行并溢出它的行。如何让第 1 列中的文本换行？

Answer 1

您正在寻找 Flexbox Grow & shrink utility classes Bootstrap 4.1 中添加的。使用 flex-shrink-1 它将告诉 col-auto 根据需要“收缩”，但不会溢出父级 .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