Question

我正在尝试在同一行上以最小尺寸添加两个输入字段，我尝试这样做：

<div class="row">
 <input type="number" class="form-control" class="slider-start" data-id="1">
 <input type="number" class="form-control" class="slider-end" data-id="1">
</div>

this is a fiddle

Answer 1

Flexbox应该可以为您提供帮助。

.form-control{
  width: 35%; /*size of input box*/
  flex-flow: row nowrap; /*sets flex-box elements order*/
}

.row {
  display: flex;
}

希望我能帮上忙。

Answer 2

尝试在样式中添加inline-flex。

<div class="row" style="display: inline-flex;">
  <input type="number" class="form-control" class="slider-start" data-id="1">
  <input type="number" class="form-control" class="slider-end" data-id="1">
</div>

Answer 3

你的意思是这样吗？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <div class="row">
        <div class="col-auto">
            <input type="number" class="form-control" class="slider-start" data-id="1">
        </div>
        <div class="col-auto">
            <input type="number" class="form-control" class="slider-end" data-id="1">
        </div>
    </div>

无法在小尺寸的同一行上设置输入

3 个答案: