Question

我在按钮旁边创建了一个输入文本，如下所示：

preview here

在常规电脑屏幕上看起来不错，这正是它看起来的样子。但在手机设备视图中，它未对齐：

unaligned preview here

这是我得到的工作代码：

<!-- 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 -->

我该如何解决这个问题？当我将来创造更多东西时，为了防止这种情况，我应该知道什么？

Answer 1

使用col-6代替col-sm-6 使用offset-1代替offset-md-1 使用col-3代替col-sm-2

＆＃13;

<!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>

＆＃13;

Answer 2

我希望这可以解决您的问题

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<!-- Add Filer Form -->
<div class="container">
  <div class="row py-4 bg-darkblue">
    <div class="col-md-12">
      <form>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
								<i class="fas fa-search"></i> Search
							</button>
            </div>
          </div>
        </div>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
								<i class="fas fa-search"></i> Search
							</button>
            </div>
          </div>
        </div>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
								<i class="fas fa-search"></i> Search
							</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

＆＃13;

Bootstrap 4响应式输入，搜索按钮与小媒体不对齐

2 个答案: