twitter-bootstrap 水平形式：标签旁边的文本输入不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43348873/
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
Horizontal Form: Text Input next to label not working
提问by gunnersfan
I am trying to get the label in the same line as the text box in a Bootstrap 4 horizontal form. Doesn't seem to work. The text boxes always show up in the next line. Any help is greatly appreciated.
我试图将标签与 Bootstrap 4 水平形式的文本框放在同一行。似乎不起作用。文本框总是显示在下一行。任何帮助是极大的赞赏。
<div class="form-group form-group-sm col-sm-6">
<label for="first_name" class="col-form-label">First Name</label>
<div>
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
回答by Zim
The col-*must be in .row. Use the grid column class on the labels and input wrappers...
的col-*必须是.row。在标签和输入包装器上使用网格列类...
http://www.codeply.com/go/TUs7hGHnXP
http://www.codeply.com/go/TUs7hGHnXP
<form class="form-horizontal">
<div class="container">
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="first_name" class="col-sm-3 col-form-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="last_name" class="col-sm-3 col-form-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="Street" class="col-sm-3 col-form-label">Street</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Street" name="Street">
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="City" class="col-sm-3 col-form-label">City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="City" name="City">
</div>
</div>
</div>
</div>
</div>
</form>
回答by Grigory Kislin
For flex layout you also can use inline form:
对于 flex 布局，您还可以使用内联表单：
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">Email address:</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email">
<label for="pwd" class="mr-sm-2">Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
See Inline forms, Spacingand Flexbox
回答by Sabbir Rupom
You can write the previous bootstrap horizontal form like the following
您可以像下面这样编写以前的引导程序水平形式
<form>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" value="" placeholder="Email Address">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div></form>
