bootstrap-4 - 如何使用标签内联表单控件输入

Question

使用 Bootstrap 4，您如何获得与标签内联的表单控件输入。我找不到任何关于如何在保持每个表单组响应行和列的同时内联表单控件的示例。

我遇到的问题是标签占据了整个块，我想要一个更紧凑的控件，其中标签与控件位于同一块上，同时每组标签和输入仍位于响应网格中。

<form action="#" autocomplete="nope">
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="companyName" class="mr-2 col-form-label-sm">Name:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="companyName" id="companyName" placeholder="Company Name" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="version" class="mr-2 col-form-label-sm">Version:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="version" id="version" placeholder="Version" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="notes" class="mr-2 col-form-label-sm">Notes:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="notes" id="notes" placeholder="Notes" pattern="^.+$" value="">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-lg-12">
            <button type="submit" class="btn btn-primary btn-sm">Add</button>
            <button type="button" class="btn btn-light btn-sm ml-1">Cancel</button>
        </div>
    </div>
</form>

Answer 1

您可以添加以下代码来实现此目的。

.form-group.col-md-4 {
    display: flex;
    align-items: center;
}

.form-group.col-md-4 {
    display: flex;
    align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form action="#" autocomplete="nope">
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="companyName" class="mr-2 col-form-label-sm">Name:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="companyName" id="companyName" placeholder="Company Name" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="version" class="mr-2 col-form-label-sm">Version:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="version" id="version" placeholder="Version" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="notes" class="mr-2 col-form-label-sm">Notes:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="notes" id="notes" placeholder="Notes" pattern="^.+$" value="">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-lg-12">
            <button type="submit" class="btn btn-primary btn-sm">Add</button>
            <button type="button" class="btn btn-light btn-sm ml-1">Cancel</button>
        </div>
    </div>
</form>
</div>