forms - 当另一个字段有反馈时,为什么 bootstrap-4 输入组会拉伸?
问题描述
我有一个可以在一行中包含多个输入组的表单。我正在尝试使用无效反馈(类)来提供表单反馈,但是当我这样做时,相邻字段会垂直拉伸。下面的代码是一个简单的 2 行 2 个输入示例,显示了当右列有反馈时左列是如何被拉伸的。我真的很感激这方面的一些帮助。
<div class="container mt-3">
<div class="row">
<div class="input-group mb-3 col-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">First:</span>
</div>
<input type="text" class="form-control" placeholder="First" aria-label="First" aria-describedby="basic-addon1">
<div class="invalid-feedback">Should not show</div>
</div>
<div class="input-group mb-3 col-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">Second:</span>
</div>
<input type="text" class="form-control is-invalid" placeholder="Second" aria-label="Second" aria-describedby="basic-addon2">
<div class="invalid-feedback">Some text</div>
</div>
<div class="input-group mb-3 col-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Third:</span>
</div>
<select class="form-control" id="exampleFormControlSelect1" aria-describedby="basic-addon3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="invalid-feedback">Should not show</div>
</div>
<div class="input-group mb-3 col-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon4">Fourth:</span>
</div>
<input type="text" class="form-control is-invalid" placeholder="Fourth" aria-label="Fourth" aria-describedby="basic-addon4">
<div class="invalid-feedback">Some other text</div>
</div>
</div>
</div>
jsfiddle:https ://jsfiddle.net/8e2uo4jL/
解决方案
我不知道这是否是您需要的,但您应该使用align-self-start
并启用d-flex
:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="row">
<div class="input-group mb-3 col-6 align-self-start d-flex">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">First:</span>
</div>
<input type="text" class="form-control" placeholder="First" aria-label="First" aria-describedby="basic-addon1">
<div class="invalid-feedback">Should not show</div>
</div>
<div class="input-group mb-3 col-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">Second:</span>
</div>
<input type="text" class="form-control is-invalid" placeholder="Second" aria-label="Second" aria-describedby="basic-addon2">
<div class="invalid-feedback">Some text</div>
</div>
<div class="input-group mb-3 col-6 align-self-start d-flex">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Third:</span>
</div>
<select class="form-control" id="exampleFormControlSelect1" aria-describedby="basic-addon3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="invalid-feedback">Should not show</div>
</div>
<div class="input-group mb-3 col-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon4">Fourth:</span>
</div>
<input type="text" class="form-control is-invalid" placeholder="Fourth" aria-label="Fourth" aria-describedby="basic-addon4">
<div class="invalid-feedback">Some other text</div>
</div>
</div>
</div>
推荐阅读
- python - 如何在 python 的 zip 文件中读取受密码保护的 .xlsx 文件?
- powershell - 如何在powershell中使用计数器从某个应用程序池中的所有工作进程来监视cpu使用情况
- git - git diff 什么都不显示
- python - 为什么会出现这种缩进错误?
- strapi - 安装 Strapi 时出现错误
- javascript - 我想在下图中使用 for 循环,我添加了 for 循环,但它不起作用
- c# - ASP.NET Core 创建自定义输入标签助手
- c# - nuget 包与其引用的 nuget 包之间的不同版本
- selenium - 无法通过元素包含的特定文本找到带有硒的元素,当我想通过特定文本+变量搜索它时
- python - 合并两个文件后,一个 x 值在图中重复两次