Twitter bootstrap 水平形式:标签旁边的文本输入无效
我试图让标签与bootstrap4水平形式的文本框在同一行。似乎不起作用。文本框始终显示在下一行中。非常感谢您的帮助Twitter bootstrap 水平形式:标签旁边的文本输入无效,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,我试图让标签与bootstrap4水平形式的文本框在同一行。似乎不起作用。文本框始终显示在下一行中。非常感谢您的帮助 <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-contr
<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>
名字
小提琴:列-*必须在
行中。在标签和输入包装器上使用grid column类
名字
姓
街头
城市
对于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>
电邮地址:
密码:
记得我吗
提交
请参见和您可以编写前面的引导水平表单,如下所示
<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>
电子邮件
密码
通过这种方式,您可以在布局中嵌套网格,这将使更复杂的表单变得不可能。
<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>