Bootstrap 4 отзывчивый ввод с кнопкой поиска, выровненной с маленькими СМИ

Question

Я создал текст для ввода рядом с кнопкой, например так:

На обычном экране компьютера это выглядит хорошо, именно так оно и должно выглядеть.но в представлении телефона оно не выровнено:

Это рабочий код, который я получил:

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

Я надеюсь, что это решит вашу проблему

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

Answer 2

Используйте 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>