输入组高度时（跨度 - 输入 - 按钮）答案

【问题标题】：input-group height when (span - input - button)输入组高度时（跨度 - 输入 - 按钮）
【发布时间】：2017-11-13 06:47:10
【问题描述】：

尝试使用 Bootstrap 3.3.7 构建一个 3 控件输入组，但是第一个插件的高度与以下输入或按钮不匹配。

<div class="input-group">
    <span class="input-group-addon">Amount</span>
    <input type="text" class="form-control" />
    <div class="input-group-btn">
        <button class="btn">Submit</button>
    </div>
</div>

任何人有一个工作样本来解决这个设计？

【问题讨论】：

我观察到了类似的行为，但 Bootstrap 3.3.7 中的这段代码本身似乎没有受到影响：jsfiddle.net/aq9Laaew/23819

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

首先，您的<label> 标签在哪里？

您想在输入字段中提交吗？还是它下面的提交按钮？

您还需要在其周围放置表格，并且您的输入可以声明为数字，因为它是数量；您的输入字段还需要一个名称。提交按钮是 type='submit' 的输入按钮：示例：

<input type="submit" class="btn btn-default" value="submit" id="submit">

你也可以在你的身上声明 class='container'

<body class="container">
    <form id="youWantToGiveThisAName" class="form-group">
    <label for="amountOfSomething"></label>
    <div class="input-group">
        <span class="input-group-addon">Amount</span>
        <input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
    </div>
    <div>
        <input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
    </div>
</form>
</body>

这里是fiddle 来查看结果

【讨论】：

所需的设计是一个内联输入组，带有 |正文 |输入 |按钮 |对于问题的构造，表单和/或标签标签是无关紧要的。
使用 Bootstrap 4 和帖子中的原始代码似乎可以工作。但引导程序 3.3.7 不符合要求。有人吗？