如何防止段落扩展 bootstrap 的 col-auto parent 宽度？

Question

我将引导程序的row与两个col-auto一起使用。 在第二个中，我有一个带有<input>和一个段落<p>的表单。 根据输入字段（所有输入字段都通过maxlength和size属性分配了最小宽度），第二列应具有最小可能宽度。

我的问题是，如果段落足够长，段落总是增加列的宽度。 我宁愿有一些换行符并在更多行上显示内容。 有没有办法在不设置固定宽度、添加<br>或使用 javascript 的情况下做到这一点？

直播： https ://jsfiddle.net/hg37j0yt/

Answer 1

大声笑可能很容易...我希望这篇文章不会被当作广告:)我买了pingendo.com，所以我可以给你这个练习来提高我的pingendo技能：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="theme.css" type="text/css">
</head>

<body>
  <div class="py-5 px-0 mx-0">
    <div class="container col-sm-12 col-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-4 bg-primary"> COL1 </div>
        <div class="col-8 bg-secondary">
          <input class="form-control" type="text">
          <p > I'm a quite long paragraph and I do not want to expand the width of my column, I'd rather be wrapped. </p>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

无论如何...如果下载了该内容，则应单击新项目_blank.html，然后将看到一个空白屏幕，然后按f2键，并且在左侧可以看到一些引导程序对象，可用于快速测试设置对于任何使用bootstrap

Answer 2

不能将<div class="col-auto bg-warning">替换为<div class="col bg-warning">吗？

即不要使用col-auto ，只需对包含<p>的div使用col

Answer 3

老问题，但我花了一段时间才找到答案。 在col-auto div中的child添加如下样式，防止其扩展parent的宽度：

style="min-width: 100%; width: 0;"

参考： https ://stackoverflow.com/a/36092670/1788672

如何防止段落扩展 bootstrap 的 col-auto parent 宽度？

问题描述

3 个解决方案

解决方案1
0 2019-08-25 14:05:05

解决方案2
0 2022-04-15 02:11:50

解决方案3
0 2022-12-15 19:38:15

如何防止段落扩展 bootstrap 的 col-auto parent 宽度？

问题描述

3 个解决方案

解决方案1 0 2019-08-25 14:05:05

解决方案2 0 2022-04-15 02:11:50

解决方案3 0 2022-12-15 19:38:15

解决方案1
0 2019-08-25 14:05:05

解决方案2
0 2022-04-15 02:11:50

解决方案3
0 2022-12-15 19:38:15