Проблема выравнивания макета столбца в Bootstrap 4 - перенос вложенных столбцов

Question

Я написал приведенный ниже макет столбца в Bootstrap 4. Он не выровнен должным образом. Последний из вложенных столбцов переносится на новую строку.

<div class="row">
    <div class="col-sm-3">
      <div class="row">
        <div class="col-sm-4">
          <label class="col-form-label custom-label" for="idNo">Lable Name</label>
        </div>
        <div class="col-sm-1">
          <label class="col-form-label">:</label>
        </div>
        <div class="col-sm-7">
          <label class="col-form-label">Label Value</label>
        </div>
      </div>
    </div>
    <div class="col-sm-9"></div>
  </div>[enter image description here][1]

Answer 1

<div class="container">
<div class="row">
    <div class="col-sm-3">
        <ul class="list-inline">
            <li class="list-inline-item">
                <label class="col-form-label custom-label" for="idNo">Lable Name</label>
            </li>
           <li class="list-inline-item">
                <label class="col-form-label">:</label>
            </li>
           <li class="list-inline-item">
                <label class="col-form-label">Label Value</label>
            </li>
        </ul>
    </div>
    <div class="col-sm-9"></div>
</div>

Answer 2

Недостаточно ширины в col-sm-3 для размещения содержимого и отступов 3 столбцов, поэтому столбцы переносятся (располагаются вертикально). Чтобы предотвратить это, вы можете настроить отступ столбцов внутри строки. Bootstrap 4 имеет класс no-gutters для этой цели ...

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="row no-gutters">
                <div class="col-sm-4">
                    <label class="col-form-label custom-label" for="idNo">Lable Name</label>
                </div>
                <div class="col-sm-1">
                    <label class="col-form-label">:</label>
                </div>
                <div class="col-sm-7">
                    <label class="col-form-label">Label Value</label>
                </div>
            </div>
        </div>
        <div class="col-sm-9"></div>
    </div>
</div>

https://www.codeply.com/go/WBZZpqvuvC

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