<div class="container"> <div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div> <label for="sign_times" class="hr-label col-md-6"><span class="required">*</span><span class="hr-span">签订次数</span> </label> <div class="input-group spinner"> <input type="text" class="form-control" value="42"> <div class="input-group-btn-vertical"> <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> </div> </div> </div>
.spinner { width: 100px; } .spinner input { text-align: right; } .input-group-btn-vertical { position: relative; white-space: nowrap; width: 1%; vertical-align: middle; display: table-cell; } .input-group-btn-vertical > .btn { display: block; float: none; width: 100%; max-width: 100%; padding: 8px; margin-left: -1px; position: relative; border-radius: 0; } .input-group-btn-vertical > .btn:first-child { border-top-right-radius: 4px; } .input-group-btn-vertical > .btn:last-child { margin-top: -2px; border-bottom-right-radius: 4px; } .input-group-btn-vertical i{ position: absolute; top: 0; left: 4px; }
(function ($) { $('.spinner .btn:first-of-type').on('click', function() { $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1); }); $('.spinner .btn:last-of-type').on('click', function() { $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1); }); })(jQuery);