Question

test.html

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />

</head>
<body>
    <div class="col-md-12">
        <table>
            <tr>
                <div class="col-md-3">
                    <label>Min: <span data-toggle="tooltip" data-placement="bottom" data-html="true" title="" class="glyphicon glyphicon-info-sign glyphiconFormButton"></span></label>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-danger btn-number"  data-type="minus" data-field="question[nr][text][min]">
                                <span class="glyphicon glyphicon-minus"></span>
                            </button>
                        </span>
                        <input type="text" name="question[nr][text][min]" class="form-control input-number" value="5" min="1" max="50">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="question[nr][text][min]">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-3">
                    <label>Max: <span data-toggle="tooltip" data-placement="bottom" data-html="true" title="" class="glyphicon glyphicon-info-sign glyphiconFormButton"></span></label>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-danger btn-number"  data-type="minus" data-field="question[nr][text][max]">
                                <span class="glyphicon glyphicon-minus"></span>
                            </button>
                        </span>
                        <input type="text" name="question[nr][text][max]" class="form-control input-number" value="30" min="10" max="50">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="question[nr][text][max]">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-1">
                    <button class="btn btn-danger" type="button" onClick="deleteQuestion()">Remove</button>
                </div>
            </tr>
        </table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

所有包括我从那里得到：enter link description here 和文件夹 dist

为什么按钮“ - ”和“+”与输入字段的高度不同？
如果我可以提出第二个问题，如何将“删除”按钮放在与“ - ”相同的行中，输入“+”？

更新：我看到相应的按钮大小为14x20，我的是14x14，但为什么呢？

Answer 1

我的+和-按钮没有问题第二个问题，因为inputs有labels！快速修复，将padding-top添加到remove button：

<div class="col-md-1 custom">
  <button class="btn btn-danger" type="button" onClick="deleteQuestion()">Remove</button>
</div>

.custom {
  padding-top: 26px;
}

在jsfiddle中我将md - 类更改为xs - 使用小屏幕的类，为您更改它！
jsfiddle-link

Bootstrap btn组高度

1 个答案: