输入组高度(span - 输入 - 按钮)

时间:2017-06-11 20:30:13

标签: css twitter-bootstrap twitter-bootstrap-3

尝试使用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>

任何人都有工作样本来解决这个设计?

1 个答案:

答案 0 :(得分:0)

首先,您的<label>代码在哪里?

您想在输入字段中提交吗?或者下面的提交按钮?

您还需要在其周围放置表单,并且您的输入可以声明为数字,因为它的数量;您的输入字段也需要一个名称。提交按钮是type ='submit'的输入按钮: 例如:

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

你也可以在你的身体上声明='容器'

<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来查看结果