使用 Bootstrap 设计递增和递减数字
Gan*_*tta 0 css jquery responsive-design twitter-bootstrap
我正在尝试获取如下所示的用户界面，并且需要在数字下方有一个边框，如图所示：
但我使用下面所示的代码得到了不同的结果。有人可以帮我设计这个吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.input-number{
margin: 0 15px;
width: 50px !important;
}
</style>
</head>
<body>
<div style="width:150px;padding:50px;">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</body>
</html>您只需将输入字段类型设置为“数字”，它将自动为您添加增量和减量按钮。以下是代码示例：
<input type="number" class="form-control" id="input1" placeholder="enter amount">
| 归档时间： |
|
| 查看次数： |
20047 次 |
| 最近记录： |