CSS 标签和输入在表单组的同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48907760/
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
label and input in same line on form-group
提问by Rohr Facu
I have a form group with both a label and input
我有一个带有标签和输入的表单组
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
However the label displays above the input field, i need it at its side. I have bootstrap 4.0 installed.
但是标签显示在输入字段上方，我需要它在它的旁边。我已经安装了引导程序 4.0。
I've tried with class="col-sm-2 col-form-label" and does not work either.
我试过 class="col-sm-2 col-form-label" 并且也不起作用。
Any suggestions?
有什么建议？
回答by Zim
The col-sm-2shouldn't be nested directly in col-md-12. Use the grid like this...
本col-sm-2不应该直接嵌套col-md-12。像这样使用网格...
https://www.codeply.com/go/Gdt1BZs9Hg
https://www.codeply.com/go/Gdt1BZs9Hg
<form class="col-12">
<div class="form-row">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</form>
Notice that form-rowmust used to contain the col-. The col-sm-10controls the width of the input, so you can change that as needed. Read more in the docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid
请注意，form-row必须用于包含col-. 在col-sm-10控制输入的宽度，这样你就可以改变这种需要。在文档中阅读更多内容：https: //getbootstrap.com/docs/4.0/components/forms/#form-grid
Also, note the correct use of the grid row > columnsfrom the Bootstrap docs...
另外，请注意Bootstrap 文档中网格行 > 列的正确使用...
In a grid layout, content must be placed within columns and only columns may be immediate children of rows... You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
在网格布局中，内容必须放置在列中，并且只有列可以是行的直接子项...您也可以将 .row 交换为 .form-row，这是我们标准网格行的一种变体，它覆盖了默认的列间距以获得更紧密和更紧凑的布局。
回答by Mittal Patel
You can achieve it by using class form-inline
您可以通过使用类来实现它 form-inline
<div class="form-inline">
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</div>
回答by Safiyya
See bootsrap 4 documentation about Forms https://getbootstrap.com/docs/4.0/components/forms/#inline-formsand use form-inline
请参阅有关表单的 bootsrap 4 文档https://getbootstrap.com/docs/4.0/components/forms/#inline-forms并使用form-inline
<div class="col-md-12 form-group form-inline">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
