【发布时间】：2019-11-15 16:13:52
【问题描述】：
我看到了一些与此类似的问题，但是，我认为这些问题中提供的答案都没有暗示我正在寻找的正确方向。
我要创建的是同一行上的输入和按钮。输入总是需要尽可能多的空间，不管它的父元素有多大或多小。调整屏幕大小时，输入和按钮元素仍应保持内联（即响应式）。结果应该是这样的：
这些是我能想出的可能答案，但这些都不是我想要的：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<br />
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<p>
Not like this please:
</p>
<div class="form-group">
<label for="exampleInputLabel1">Label</label>
<input type="text" class="form-control" id="exampleInputText1" placeholder="Your value">
</div>
<button type="submit" class="btn btn-default">Action</button>
<hr style="border-color: #ddd;" />
<p>
Also not like this please:
</p>
<div class="form-inline">
<div class="form-group">
<label for="exampleInputLabel2">Label</label>
<input type="text" class="form-control" id="exampleInputLabel2" placeholder="Your value">
</div>
<div class="form-group">
<label for="exampleInputLabel3">Label</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Your value">
</div>
<button type="submit" class="btn btn-default">Action</button>
</div>
<hr style="border-color: #ddd;" />
<p>
Or also not this:
</p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your value">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Action</button>
</span>
</div>
</div>
<!--panel-body end-->
</div>
</div>
</div>
</div>也许我可以使用 flexbox，但如果其他人可以通过将我引导到适当的解决方案来帮助我，我会非常有兴趣了解与此相关的任何事情。
我已经检查过的一些问题：
【问题讨论】：
-
为什么不将它们包装成列，一个
.col-xs-9和一个.col-xs-3用于按钮，即使在移动设备上它也会内联它们并适应父宽度。虽然，从列填充来看，它们之间可能存在一些中等差距。 -
是的，我也想过这样做@darklightcode，但正如你所说，填充是非常不需要的。此外，当按钮的内容文本大于列时，内容将无法很好地对齐。
标签： html css twitter-bootstrap twitter-bootstrap-3