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

在行类中将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>

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>

我认为您必须了解Bootstrap的网格系统。 https://getbootstrap.com/docs/4.0/layout/grid/

如何连续移动两个输入框

2 个答案: