Html 内联 Bootstrap 表单布局，输入上方带有标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24471636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline Bootstrap form layout with labels above inputs
提问by Chad Johnson
I'd like to create a form with the following layout using Bootstrap 3:
我想使用 Bootstrap 3 创建一个具有以下布局的表单：
I have a jsfiddle with an attempt here: http://jsfiddle.net/quyB6/
我在这里尝试了一个 jsfiddle：http: //jsfiddle.net/quyB6/
And the markup I've tried:
我尝试过的标记：
<form>
<div class="form-group col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="number" value='' class="form-control" id="paddingTop" />
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="number" value='' class="form-control" id="paddingBottom">
</div>
</div>
回答by nicholaschris
I think the simplest solution would be to add col-xs-4to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </form>.
我认为最简单的解决方案是添加col-xs-4到每个 div 的类中。这将确保 div 将内联用于 jsfiddle 示例。此外，您应该使用</form>.
<form>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
</form>
回答by Hyman
Replace <label>tag with <div>and it will line up on top perfectly.
用 替换<label>标签，<div>它将完美地排列在顶部。
回答by F.D.Castel
For bootstrap v4 you can use d-flex flex-column:
对于引导程序 v4，您可以使用d-flex flex-column：
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
</div>
回答by BitAtWork
With Bootstrap 4.4:
使用 Bootstrap 4.4：
Use the class "form-row" in the form element.
在表单元素中使用类“form-row”。
<form class="form-row">
<div class="form-group col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="number" value='' class="form-control" id="paddingTop" />
</div>
<div class="form-group col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="number" value='' class="form-control" id="paddingBottom">
</div>
</form>
回答by jenniwren
Putting <div style="clear: both;"></div>between the <label>and the <input>worked for me. I tried a bunch of the above ideas with no luck. This is with Bootstrap 3.3.7.
把<div style="clear: both;"></div>之间<label>和<input>为我工作。我尝试了一堆上述想法但没有运气。这是 Bootstrap 3.3.7。
So
所以
<label for="name" class="control-label">Line Height</label>
<div style="clear: both;"></div>
<input type="number" value='' class="form-control" id="lineHeight">
I also included "pull-right"as a class (i.e. class="control-label pull-right"and class="form-control pull-right"to get the label and the input on the right-hand side of the page.
我还包括"pull-right"作为一个类（即class="control-label pull-right"并class="form-control pull-right"获取页面右侧的标签和输入。
回答by nikhil sugandh
this will work:
这将起作用：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-md-4">
<label for="name" class="control-label">Line Height</label>
</div>
<div class="col-md-4">
<label for="name" class="control-label">Padding Top</label>
</div>
<div class="col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="lineHeight">
</div>
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="paddingTop" />
</div>
<div class="col-md-4">
<input type="number" value='' class="form-control bg-secondary text-white" id="paddingBottom">
</div>
</div>
</div>
</body>
</html>
