我正在使用 Bootstrap 4 处理表单。现在,当将表单与网格类一起使用时,它实际上并没有像预期的那样工作。输出可以在这里看到 http://www.henryspike.tk/testform
我的预期是看到整个 12 列分为 4-4-4,每列包含一个输入字段,但它堆叠起来。
<div class="row">
<div class="col-md-12 offset-md-1">
<div class="row">
<form class="form">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" placeholder="eg. John Doe" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Name</label>
<input class="form-control" type="email" name="email" id="email" placeholder="someone@example.com" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="username">Name</label>
<input class="form-control" type="text" name="username" id="username" placeholder="eg. JDoe12" required>
</div>
</div>
</form>
</div>
</div>
</div>
最佳答案
col-
应始终是 row
的直接子级..
http://www.codeply.com/go/moFmNMMuPs
<div class="row">
<div class="col-md-12">
<form class="row form">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" placeholder="eg. John Doe" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Name</label>
<input class="form-control" type="email" name="email" id="email" placeholder="someone@example.com" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="username">Name</label>
<input class="form-control" type="text" name="username" id="username" placeholder="eg. JDoe12" required="">
</div>
</div>
</form>
</div>
</div>
关于html - Bootstrap 4 布局在与表单一起使用时无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43411122/