引導程序：如何將輸入與按鈕對齊

Question

我正在使用Bootstrap在模式中創建表單，但是標簽有問題。 標簽在輸入的頂部而不是內部，並且使用右側的按鈕弄亂了垂直對齊方式

我正在使用bootstrap 3.3.7，這是我的代碼

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form> <div class="form-group"> <div class="input-group"> <label for="nombre_comercio_form">Id comercio:</label> <input type="text" class="form-control" id="nombre_comercio_form" ng-model="nombre_comercio"> <span class="input-group-btn"> <button type="button" class="btn btn-primary" onclick="$('#buscadora').focus()" data- toggle="modal" data-target="#ModalBuscarComercio">Buscar Comercio </button> </span> </div> </div> <div class="form-group"> <label for="nit_form">Codigo del plan:</label> <input type="text" class="form-control" id="nit_form" ng-model="nit_comercio"> </div> <div class="form-group"> <label for="nombre_payu_form">Descripcíon:</label> <input type="text" class="form-control" id="nombre_payu_form" ng-mode="nombre_payu"> </div> <div class="form-group"> <label for="correo_payu_form">Duración:</label> <input type="text" class="form-control" id="correo_payu_form" ng-model="correo_payu"> </div> <div class="form-group"> <label for="plan_code_form">Valor:</label> <input type="text" class="form-control" id="plan_code_form" ng-model="plan_code"> </div> </form> 

Answer 1

將其添加到.input-group-btn得到：

.input-group-btn {display: block;}

預習

片段

 .modal .input-group-btn {display: block;} 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="modal show"> <div class="modal-body"> <form> <div class="form-group"> <div class="input-group"> <label for="nombre_comercio_form">Id comercio:</label> <input type="text" class="form-control" id="nombre_comercio_form" ng-model="nombre_comercio"> <span class="input-group-btn"> <button type="button" class="btn btn-primary" onclick="$('#buscadora').focus()" data- toggle="modal" data-target="#ModalBuscarComercio">Buscar Comercio </button> </span> </div> </div> <div class="form-group"> <label for="nit_form">Codigo del plan:</label> <input type="text" class="form-control" id="nit_form" ng-model="nit_comercio"> </div> <div class="form-group"> <label for="nombre_payu_form">Descripcíon:</label> <input type="text" class="form-control" id="nombre_payu_form" ng-mode="nombre_payu"> </div> <div class="form-group"> <label for="correo_payu_form">Duración:</label> <input type="text" class="form-control" id="correo_payu_form" ng-model="correo_payu"> </div> <div class="form-group"> <label for="plan_code_form">Valor:</label> <input type="text" class="form-control" id="plan_code_form" ng-model="plan_code"> </div> </form> </div> </div> 

替代解決方案

或者，如果您希望標簽位於輸入中，請使用placeholder屬性。