我有一个形式,可以包括一行多个输入组。我试图使用无效的反馈(类)提供形式的反馈,但是当我这样做相邻领域越来越垂直拉伸。以下代码是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>