Как исправить сетку столбца Bootstrap, которая не выравнивается?

Question

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

Я пытался использовать разные коды начальной загрузки css cdn, кроме загруженных, но проблема все еще сохраняется.

<!------ Begin Description Section ------->
<div id="Description_details" class="container">
<div class="row">
  <div class="step body current" id="trade-steps-p-2" role="tabpanel" aria-labelledby="" aria-hidden="false"
    style="display: block;">
    <fieldset class="trade">
      <legend>What are you Buying?</legend>
      <div class="form-group col-md-6 required" aria-required="true">
        <label for="ContractName">Give Your Trade a Name
          <a href="#" data-toggle="popover" data-trigger="hover" data-content=" data-original-title="" title="">
              <i class=" fa fa-question-circle"></i>
          </a>
        </label>
        <input name="data[Contract][name]" class="form-control" maxlength="50" type="text" id="ContractName"
          required="required" aria-required="true" aria-invalid="false">
      </div>

      <div class="form-group col-md-6 required" aria-required="true">
        <label for="">Industry Classification</label>
        <select name="data[Contract][industry]" class="form-control" id="" required="required" aria-required="true"
          aria-invalid="false">
          <option value="GENERAL_GOODS_SERVICES" selected="selected">General Goods &amp; Services</option>
          <option value="AGRICULTURE_LIVESTOCK_GAME">Agriculture, Livestock &amp; Game</option>
          <option value="ART_ANTIQUES_COLLECTIBLES">Art, Antiques &amp; Collectibles</option>
          <option value="BUSINESS_SALE_BROKING">Business Sale &amp; Broking</option>
          <option value="VEHICLES_WATERCRAFT">Cars, Bikes &amp; Watercraft</option>
          <option value="CONSTRUCTION">Construction</option>
        </select>
      </div>
  </div>
</div>

Чтобы области ввода совпали как col-md-6 слева и справа соответственно.

Answer 1

Вы используете col-md-6, поэтому поле ввода не соответствует строке. Вам следует использовать col-lg-12 или col-md-12. см. документацию о том, как работает сеточная система Сетка Bootstrap 4

Answer 2

Вот решение, где я использовал w-100, чтобы использовать полную ширину. Мой Тип должен всегда начинаться с небольшого экрана , где я использовал col-12. Когда экран становится больше, они могут быть рядом с col-md-6 для обоих.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!------ Begin Description Section ------->
<div id="Description_details" class="container">
  <div class="row">
    <div class="step body current w-100" id="trade-steps-p-2" role="tabpanel" aria-labelledby="" aria-hidden="false" style="display: block;">
      <fieldset class="trade">
        <legend>What are you Buying?</legend>
        <div class="row">
          <div class="form-group col-12 col-md-6 required" aria-required="true">
            <label for="ContractName">Give Your Trade a Name
          <a href="#" data-toggle="popover" data-trigger="hover" data-content=" data-original-title="" title="">
              <i class=" fa fa-question-circle"></i>
          </a>
        </label>
            <input name="data[Contract][name]" class="form-control" maxlength="50" type="text" id="ContractName" required="required" aria-required="true" aria-invalid="false">
          </div>

          <div class="form-group col-12 col-md-6 required" aria-required="true">
            <label for="">Industry Classification</label>
            <select name="data[Contract][industry]" class="form-control" id="" required="required" aria-required="true" aria-invalid="false">
              <option value="GENERAL_GOODS_SERVICES" selected="selected">General Goods &amp; Services</option>
              <option value="AGRICULTURE_LIVESTOCK_GAME">Agriculture, Livestock &amp; Game</option>
              <option value="ART_ANTIQUES_COLLECTIBLES">Art, Antiques &amp; Collectibles</option>
              <option value="BUSINESS_SALE_BROKING">Business Sale &amp; Broking</option>
              <option value="VEHICLES_WATERCRAFT">Cars, Bikes &amp; Watercraft</option>
              <option value="CONSTRUCTION">Construction</option>
            </select>
          </div>
        </div>
    </div>
  </div>

Answer 3

Установить пользовательскую маржу для этого класса

. col-md-6 {
 margin: 5px !important;
}

Надеюсь, это сработает.