好吧,这开始激怒我了。我是第一次在 bootstrap 4 中工作,我试图在不添加太多 div 的情况下格式化表单。
我正在尝试让标签位于输入字段旁边。我试过使用 float 、col 和其他一些东西,但出于某种原因他们不想听我的!
请帮助不要发疯。
我的html
<form class='form-group'>
<div class='container'>
<div class='row'>
<div class='col-6'>
<div class="form-group">
<label class='col-form-label formLabel'>Customer Name:</label>
<input class='form-control formInput' name='customerName' />
</div>
<div class="form-group">
<label class='formLabel'>Phone Number:</label>
<input class='form-control formInput' name='phoneNumber' />
</div>
<div class="form-group">
<label class='formLabel'>Email:</label>
<input class='form-control formInput' name='emailAddress' />
</div>
</div>
</div>
<div class='col-6'>
<div class="form-group">
<label class='col-form-label formLabel'>Customer Name:</label>
<input class='form-control formInput' name='customerName' />
<div class="form-group">
<label class='formLabel'>Phone Number:</label>
<input class='form-control formInput' name='phoneNumber' />
</div>
<div class="form-group">
<label class='formLabel'>Email:</label>
<input class='form-control formInput' name='emailAddress' />
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class='btn btn-success'>Save Changes</button>
</div>
</form>
https://www.bootply.com/b8B4C07XB7
可能的重复项来自四年前。不同版本的 Bootstrap 。
最佳答案
只需在 form 标签内添加 form-inline 类,看看它的神奇之处!
<form class="form-group form-inline">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<label class="col-form-label formLabel">Customer Name:</label>
<input class="form-control formInput" name="customerName">
</div>
</div>
</div>
</div>
</form>
关于html - Bootstrap 4 表单格式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47165328/