我试图让标签与 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>
最佳答案
col-*
必须在 .row
中。在标签和输入包装器上使用网格列类...
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>
关于twitter-bootstrap - 水平表格 : Text Input next to label not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43348873/