Как выровнять поля ввода и метки формы Bootstrap?

Question

Я работаю над формами bootstrap-4, в которых у меня есть несколько полей ввода и меток.Я успешно создал его, но хочу добавить к нему некоторые функции, чтобы он выглядел великолепно с точки зрения пользовательского интерфейса и был удобен для пользователя.

Рабочий фрагмент

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <div class="input-group ">
        <label class="col-lg-2  text-primary">Company ID :</label> <input type="text" class="col-lg-4  form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">MRP:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
				<i class="fa fa-save"></i>&nbsp;Save
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-eraser'></i>&nbsp;Clear
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-window-close'></i>&nbsp;Close
			</button>

    <br>
    <br>
  </div>

</form>

На маленьких устройствах вывод работает нормально, но на больших устройствах я сталкиваюсь со следующими проблемами:

• Я выравниваю 4 метки и вводаполе в одной строке, но поля ввода выглядят очень маленькими по ширине в пользовательском интерфейсе, потому что между меткой и полем ввода очень много места
• заголовок, который "Идентификатор компании и имя", я хочусместить их так, чтобы они появлялись в центре на больших экранах
• У меня есть несколько раскрывающихся списков с некоторыми полями ввода;поля ввода, в которых нет раскрывающихся списков, я хочу взять на полную ширину, как на маленьких устройствах

Изменения, которые я пытаюсь сделать,

Мне нужны поля ввода с раскрывающимся списком, а не только с раскрывающимся списком

Answer 1

I ответил на аналогичный вопрос ранее.Как видите, установка определенной ширины столбца не работает хорошо для всех надписей, поскольку они имеют разную ширину.

Для этого есть несколько разных способов, включая сетку CSSи ширину ячейки таблицы, но IMO самое простое решение - использовать display:table-cell и медиазапрос, чтобы он применялся только выше определенной ширины экрана.Вам также необходимо очистить разметку, используя col-form-label и правильно структурированные группы ввода.

      <div class="form-row align-items-center">
            <label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
            <div class="input-group col-lg col-md-4 align-items-start py-2">
                <input type="text" class="form-control">
                <div class="input-group-append">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
                    </div>
                </div>
            </div>
            ...
      </div>

Демонстрация: https://www.codeply.com/go/GJ0Puh9pWd

Примечание. Не используйте row иcontainer-fluid вместе в одном элементе.

Answer 2

Чтобы увеличить ввод, я изменил размеры столбцов.Все col-lg-2, которые я изменил на col-lg-1, и все col-lg-4, которые я изменил на col-lg-5, и входы выглядят намного более полными на более широких дисплеях. Вот кодекс с ним.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container" id="center">
      <div class="input-group ">
        <label class="col-lg-1  text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-1  text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
        <input type="text" class="form-control col-lg-5 4">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
        <input type="text" class="col-lg-5 4 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">MRP:</label>
        <input type="text" class="form-control col-lg-5 4">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
        <input type="text" class="col-lg-3 3 form-control ">

      </div>
    </div>

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
                <i class="fa fa-save"></i>&nbsp;Save
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-eraser'></i>&nbsp;Clear
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-window-close'></i>&nbsp;Close
            </button>

    <br>
    <br>
  </div>

</form>

Answer 3

Как я уже говорил в разделе комментариев о выравнивании сверху, я сделал некоторые изменения в вашем коде для первой строки, а другие прокомментированы, если хотите, затем продолжайте.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<form>

  <div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
    <br>
    <div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
      <div class="input-group ">
        <label class="col-lg-2  text-primary">Company ID :</label> <input type="text" class="col-lg-4  form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray;float: left;width: 100%;">


	<div class="row container-fluid">
      <div class="input-group mt-3">
        <div class="col-lg-3">
	        <label for="usr" class="col-lg-12 text-primary">Item Code :</label>
	        <div class="dropdown-menu col-lg-2">
	          <a class="dropdown-item" href="#">Link 1</a> 
	          <a class="dropdown-item" href="#">Link 2</a>
	          <a class="dropdown-item" href="#">Link 3</a>
	        </div>
	        <input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
	        <button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
	    </div>

	    <div class="col-lg-3">
        	<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
        	<input type="text" class="col-lg-10 form-control  ">
    	</div>

    	<div class="col-lg-3">
	        <label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
	        <div class="dropdown-menu col-lg-2">
	          <a class="dropdown-item" href="#">Link 1</a>
	          <a class="dropdown-item" href="#">Link 2</a> 
	          <a class="dropdown-item" href="#">Link 3</a>
	        </div>
	        
	        <input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
	        <button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
	    </div>

	    <div class="col-lg-3">
        	<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
        	<input type="text" class="col-lg-10 form-control">
        </div>

      </div>
    </div>


   <!--  <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> 
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>

        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a> 
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
        
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div> -->

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
				<i class="fa fa-save"></i>&nbsp;Save
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-eraser'></i>&nbsp;Clear
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-window-close'></i>&nbsp;Close
			</button>

    <br>
    <br>
  </div>

</form>

Тот же код в браузере дает идеальное текстовое поле для меня на маленьком экране.

Answer 4

Вы можете сделать что-то вроде этого:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<style>
    .container {
        margin: 5px auto;
        padding: 5px;
        color: #17A2B8;
        font-family: Verdana, Geneva, sans-serif;
    }
    h1 {
        text-align: center;
    }
    .btn, .btn-outline-secondary {
        border-color: #17A2B8;
        background-color: #17A2B8;
        color: #ffffff;
    }
    .btn:hover, .btn-outline-secondary:hover {
        background-color: #ffffff;
        color: #17A2B8;
        border-color: #17A2B8;
    }
    .show > .btn-outline-secondary.dropdown-toggle {
        color: #ffffff;
        background-color: #17A2B8;
        border-color: #17A2B8;
    }
</style>

<div class="container">
    <h1>Form</h1>
    <form>
        <div class="form-row">
            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <label for="companyId">Company ID</label>
                <input type="text" class="form-control" id="companyId">
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <label for="companyName">Company Name</label>
                <input type="text" class="form-control" id="companyName">
            </div>
        </div>
        <hr>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="itemCode">Item Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Item Code 1</a>
                            <a class="dropdown-item" href="#">Item Code 2</a>
                            <a class="dropdown-item" href="#">Item Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="itemName">Item Name</label>
                <input type="text" class="form-control" id="itemName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="brandCode">Brand Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Brand Code 1</a>
                            <a class="dropdown-item" href="#">Brand Code 2</a>
                            <a class="dropdown-item" href="#">Brand Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="brandName">Brand Name</label>
                <input type="text" class="form-control" id="brandName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="categoryCode">Category Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Category Code 1</a>
                            <a class="dropdown-item" href="#">Category Code 2</a>
                            <a class="dropdown-item" href="#">Category Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="categoryName">Category Name</label>
                <input type="text" class="form-control" id="categoryName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="subCategoryCode">Sub Category Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Sub Category Code 1</a>
                            <a class="dropdown-item" href="#">Sub Category Code 2</a>
                            <a class="dropdown-item" href="#">Sub Category Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="subCategoryName">Sub Category Name</label>
                <input type="text" class="form-control" id="subCategoryName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="unitCode">Unit Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Unit Code 1</a>
                            <a class="dropdown-item" href="#">Unit Code 2</a>
                            <a class="dropdown-item" href="#">Unit Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="unitName">Unit Name</label>
                <input type="text" class="form-control" id="unitName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="supplierCode">Supplier Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Supplier Code 1</a>
                            <a class="dropdown-item" href="#">Supplier Code 2</a>
                            <a class="dropdown-item" href="#">Supplier Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="supplierName">Supplier Name</label>
                <input type="text" class="form-control" id="supplierName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="gstCode">GST Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">GST Code 1</a>
                            <a class="dropdown-item" href="#">GST Code 2</a>
                            <a class="dropdown-item" href="#">GST Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="gstPercentage">GST Percentage</label>
                <input type="text" class="form-control" id="gstPercentage">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="sgstPercentage">SGST Percentage</label>
                <input type="text" class="form-control" id="sgstPercentage">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="cgstPercentage">CGST Percentage</label>
                <input type="text" class="form-control" id="cgstPercentage">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="costPrice">Cost Price</label>
                <input type="text" class="form-control" id="costPrice">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="sellingPrice">Selling Price</label>
                <input type="text" class="form-control" id="sellingPrice">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="mrp">MRP</label>
                <input type="text" class="form-control" id="mrp">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="boxWeight">Box Weight</label>
                <input type="text" class="form-control" id="boxWeight">
            </div>
        </div>
        <hr>
        <div class="col-auto my-1">
            <button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
            <button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
            <button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
        </div>
        <hr>
    </form>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

и, если хотите, можете добавить заполнители.