在我的表单标签上使用 text-right
类,当响应时,我希望标签左对齐,因此它是左上而不是右上,但是 的更改text-align:left
好像没有生效。
@media (max-width: 767px) {
.form-group > label.text-right {
text-align: left;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label text-right">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
最佳答案
Bootstrap 的文本对齐类是响应式。您不需要任何额外的 CSS。
使用 text-sm-right text-left
...
<div class="form-group row">
<label class="col-sm-2 col-form-label text-sm-right text-left">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
关于css - Bootstrap 在移动设备上左对齐右文本类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49354448/