我在按钮旁边创建了一个输入文本，如下所示:
它在普通电脑屏幕上看起来不错，这正是它应该看起来的样子。但在电话设备 View 中，它未对齐:
这是我得到的工作代码:
<!-- Add Filer Form -->
<div class="row py-4 bg-darkblue">
<div class="col-md-12">
<form>
<div class="form-group row offset-md-1">
<label for="filerAddress" class="col-sm-2 col-form-label text-white font-weight-bold">Filer ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="filerAddress" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-md-1">
<label for="filerName" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-md-1">
<label for="filerType" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Type</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<!-- #END# Add Filer Form -->
我该如何解决这个问题？我应该知道什么事情才能在我将来创建更多内容时防止这种情况发生？
最佳答案
使用 col-6 而不是 col-sm-6
使用 offset-1 而不是 offset-md-1
使用 col-3 而不是 col-sm-2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Add Filer Form -->
<div class="container-fluid">
<div class="row py-4 bg-secondary">
<div class="col-md-12">
<form>
<div class="form-group row offset-1">
<label for="filerAddress" class="col-3 col-form-label text-white font-weight-bold">Filer ID</label>
<div class="col-6">
<input type="text" class="form-control" id="filerAddress" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-1">
<label for="filerName" class="col-3 col-form-label text-white font-weight-bold">Filer Name</label>
<div class="col-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-1">
<label for="filerType" class="col-3 col-form-label text-white font-weight-bold">Filer Type</label>
<div class="col-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>关于css - Bootstrap 4 响应式输入，搜索按钮未与小型媒体对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50733400/