html - 如何防止段落扩展引导程序的 col-auto 父宽度?
问题描述
我正在使用row
带有两个col-auto
. 在第二个里面,我有一个带有<input>
's 和一个段落的表格<p>
。根据输入字段,第二列应具有最小可能宽度(所有输入字段都具有通过maxlength
和size
属性分配的最小宽度)。
我的问题是,如果段落足够长,该段落总是会增加列的宽度。我宁愿有一些换行符并在更多行上显示内容。有没有办法在不设置固定宽度、添加<br>
或使用 javascript 的情况下做到这一点?
解决方案
大声笑可以很容易......我希望这篇文章不会被视为广告:) 我买了 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 键,在左侧您可以看到一些引导程序对象,您可以使用它来快速测试设置任何事情都使用引导程序
推荐阅读
- php - 我正在尝试从 Laravel 中的选择输入中发布表单数据。(如果我使用文本框,我有什么作品)
- delphi - Delphi FMX 和 OpenStreetmap
- reactjs - 在 ReactJS 应用程序中,如何将全局环境中的环境变量替换为我的 index.html 文件?
- logstash - 如何不在logstash中给出完整路径
- python - Dash Plotly Textbox 回调交互
- cpu-architecture - 处理器加速计算差异
- vue.js - 是否可以在临时 v-navigation-drawer 下方订购 v-snackbar?
- python-3.x - chaquopy 是否支持 SequenceMatcher
- c# - 实体框架:创建一个与另一个具有多种关系的类
- excel - 每次复制相同的单元格并粘贴到下一个单元格