如何连续移动两个输入框

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

我不知道

你到底想要什么。它在现代浏览器中运行良好。可能是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/

Answer 2

只需在行类中将 display：flex 更改为 display：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>