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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我遇到了同样的问题。 @Athul的回答很好，但是我希望所有内容都很好地排列在一起，并在每行上始终具有一个label + control。所以我想出了这个：

<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类，用于填充到标签中的填充。

Answer 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;
}

Answer 4

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

只需更改

<div class="form-row">

到

 <div class="form-inline">

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

4 个答案: