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

【问题标题】：Bootstrap 4 how to push 2nd col to next row when 1st col has a lot of textBootstrap 4当第一列有很多文本时如何将第二列推到下一行
【发布时间】：2018-11-04 05:03:14
【问题描述】：

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

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 示例中，文本最少的第一行看起来很完美。 Col 2 位于同一行，在 col 1 旁边。第二行非常接近，但这是我的问题。 Col 2 下降到下一行，这是我想要的，但 col 1 没有换行并溢出它的行。如何让 col 1 中的文本换行？

【问题讨论】：

jsfiddle.net/bcwbo3vq
@RickSibley - 这对这两种情况都不起作用.. 它只是使 cols 堆栈破坏了 Bootstrap 网格，因为 cols 不再直接在 .row 中。

标签： css flexbox bootstrap-4

【解决方案1】：

您正在寻找在 Bootstrap 4.1 中添加的 Flexbox Grow & shrink utility classes。使用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

【讨论】：

对于 4.0.0 版，您可以使用 mw-100 类，它提供 100% 最大宽度 https://www.bootply.com/NB0rjg0RkA Sizing
感谢 ZimSystem - 效果很好。我不得不将 Bootstrap 从 4.0 升级到 4.1，但无论如何我都需要这样做。