要实现在移动设备上垂直对齐Bootstrap输入,而在桌面上水平对齐,可以使用以下方法:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input1">输入框1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">输入框2</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input3">输入框3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="form-group">
<label for="input4">输入框4</label>
<input type="text" class="form-control" id="input4">
</div>
</div>
</div>
</div>
在上述代码中,使用了col-md-6
类来将输入框分为两列,其中每列包含两个输入框。这样,在桌面上,输入框将水平对齐;在移动设备上,输入框将垂直对齐。
<style>
@media (max-width: 767px) {
.vertical-align-input {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
@media (min-width: 768px) {
.horizontal-align-input {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>
<div class="container">
<div class="vertical-align-input">
<div class="form-group">
<label for="input1">输入框1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">输入框2</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="horizontal-align-input">
<div class="form-group">
<label for="input3">输入框3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="form-group">
<label for="input4">输入框4</label>
<input type="text" class="form-control" id="input4">
</div>
</div>
</div>
在上述代码中,使用了媒体查询来定义在不同屏幕大小下应用的样式。在移动设备上,输入框将垂直对齐,使用了.vertical-align-input
类;在桌面上,输入框将水平对齐,使用了.horizontal-align-input
类。
以上是实现在移动设备上垂直对齐Bootstrap输入,在桌面上水平对齐的方法。希望对你有所帮助!
领取专属 10元无门槛券
手把手带您无忧上云