我希望字段“姓名”和“姓氏”位于同一行。
我找到了一些解决方案,例如 this one在 stackoverflow 中,但问题是我希望位于字段上方的标签也并排放置。
这怎么可能?
表单代码如下:
<form>
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
</div>
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
</div>
<div class="form-group">
<label for="inputTitle">Title:</label>
<input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="leo@saasmetrics.co">
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Notifications:</label>
<select class="form-control" id="selectEmailNotifications">
<option>None</option>
<option>Daily</option>
<option>Weekly</option>
<option selected>Monthly</option>
</select>
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Status:</label>
<select class="form-control" id="selectEmailNotifications">
<option selected>Active</option>
<option>Inactive</option>
</select>
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Profile:</label>
<select class="form-control" id="selectEmailNotifications">
<option selected>Administrator</option>
<option>User</option>
</select>
</div>
</form>
最佳答案
像这样的事情应该让你开始。
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
</div>
</div>
</div>
关于html - 同一行上的两个字段以带有 Bootstrap 的垂直形式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29871931/