Question

在Angular 5应用程序中使用Bootstrap 4，我有两个彼此相邻的表单组。如果一个文本标签的文本标签比另一文本标签的文本标签长得多，则输入字段将不会对齐，而当页面上有多行这样的文本时，结果看起来很奇怪。

您可以在https://angular-wcd2ln.stackblitz.io/上准确地了解我的意思

如何告诉我两个输入标签要垂直对齐，并在输入字段中使用“下推”标签？

Answer 1

在d-flex flex-column上使用flexbox实用程序类（form-group，在表单控制输入上使用mt-auto（margin-top：auto）...

 <div class="row">
        <div class="col-6">
            <div class="form-group h-100 d-flex flex-column">
                <label for="left">This is a short label.</label>
                <input class="form-control mt-auto" id="left" type="text">
            </div>
        </div>
        <div class="col-6">
            <div class="form-group h-100 d-flex flex-column">
                <label for="right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </label>
                <input class="form-control  mt-auto" id="right" type="text">
            </div>
        </div>
 </div>

https://www.codeply.com/go/z0vucbNNU9

在引导程序表单组上水平对齐输入字段的底部

1 个答案: