如何使用标签内联表单控件输入答案

【问题标题】：How to inline form control input with label如何使用标签内联表单控件输入
【发布时间】：2018-09-28 02:21:52
【问题描述】：

使用 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>

【问题讨论】：

我不明白这个问题。您所说的“阻止”是什么意思？

标签： bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

我遇到了同样的问题。 @Athul 的回答很好，但我希望所有东西都能很好地排列，并且每一行总是有一个标签 + 控件。所以我想出了这个：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="form-row">
    	<div class="form-group col-12 col-sm-4 col-md-3 col-lg-3">
    		<label for="Name" style="padding-top:0.375rem">Name</label>
    	</div>
    	<div class="form-group col-12 col-sm-8 col-md-9 col-lg-9">
    		<input type="text" id="Name" name="Name" class="form-control-plaintext" value="Some Name Here" readonly />
    	</div>
    </div>
    
    <div class="form-row">
    	<div class="form-group col-12 col-sm-4 col-md-3 col-lg-3">
    		<label for="Seconds" style="padding-top:0.375rem">Seconds</label>
    	</div>
    
    	<div class="form-group col-12 col-sm-8 col-md-9 col-lg-9">
    		<input type="number" id="Seconds" name="Seconds" class="form-control" />
    </div>

这对我很有效。

注意：我只需要一个表单，而不是任何地方...否则我会推荐一个自定义 CSS 类，用于添加到标签中的填充。

【讨论】：

【解决方案3】：

使用input-group、input-group-prepend，并将标签添加到input-group-text跨度中

<form>
 <div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
     <span class="input-group-text">Name</span>
    </div>
    <input type="text" class="form-control" placeholder="Name">
  </div>
</div>

在你的 CSS 文件中

.input-group > .input-group-prepend > .input-group-text {
  background-color: #fff;
  border: none;
}

.form-group > .input-group > .form-control {
 border-radius: .25rem;
}

【讨论】：

【解决方案4】：

如果您想显示与文本输入对齐的标签，您可以在代码中使用 form-inline 类。

只是改变

<div class="form-row">

到

 <div class="form-inline">

【讨论】：