Как переместить два поля ввода подряд

Question

Я разработал два поля ввода и хочу переместить их вместе, но мой код не работает

Это должно иметь простое решение, но они просто отображаются в виде списка, а не подряд.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<h2>ِStart Time</h2>
<div class="row">
  <div class="col">
    <label for="startTime">Hour(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="23">
  </div>
  <div class="col">
    <label for="startTime">Minute(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="59">
    <!--input type can be changed accordingly-->
  </div>
</div>

Где я не так?

Answer 1

просто изменить отображение: flex для отображения: inline-flex в классе строк

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<h2>ِStart Time</h2>
<div class="row" style="display:inline-flex;">
  <div class="col">
    <label for="startTime">Hour(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="23">
  </div>
  <div class="col">
    <label for="startTime">Minute(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="59">
    <!--input type can be changed accordingly-->
  </div>
</div>

Answer 2

Я не знаю, что именно вы хотите. Хорошо работает в современном браузере. Может быть, есть проблема с col классом. Иногда я сталкивался с некоторыми раздражающими вещами в этом классе. просто измените их с сеткой. Вот код ниже,

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<h2>ِStart Time</h2>
<div class="row">
  <div class="col-sm-6">
    <label for="startTime">Hour(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="23">
  </div>
  <div class="col-sm-6">
    <label for="startTime">Minute(s) </label>
    <input type="number" class="form-control" id="endTime" min="0" max="59">
    <!--input type can be changed accordingly-->
  </div>
</div> 

Я думаю, вы должны знать систему сетки начальной загрузки. https://getbootstrap.com/docs/4.0/layout/grid/