我正在创建一个表单，当我添加一个选择框时，布局没有按预期工作。选择框元素出现问题。我创建了 JSFiddle here
我将我的元素放在 form-group 中，每个元素有 50% 的宽度。
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
<div class="col-sm-8">
<select class="form-control" id="tipoDeuda">
</select>
</div>
</div>
最佳答案
当我添加 select 时它似乎工作正常。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<form class="form-horizontal" id="consultaCarteraForm">
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="empleador">Empleador</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" id="empleador" placeholder="">
<i id="searchEmpleador" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="estudioAbogados">Estudio o Tercero</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" id="estudioAbogados" placeholder="">
<i id="searchEstudioAbogados" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
<div class="col-sm-8">
<select class="form-control" id="tipoDeuda">
<option>select</option>
<option>select1</option>
<option>select2</option>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label
input-sm col-sm-4" for="devenguePorCobrar">Rango Devengue Por Cobrar</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="devenguePorCobrar">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="devenguePorCobrar1">
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Real</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoRealMin">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoRealMax">
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Presunta</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoPresMin">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoPresMax">
</div>
</div>
<!-- Button -->
<div class="col-sm-12 controls">
<button id="btnBuscar" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-search"></span> BUSCAR </button>
<button id="btnLimpiar" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></span> LIMPIAR </button>
</div>
<div class="col-sm-4">
</div>
</form>
</body>
</html>关于html - Bootstrap 3 中表单组和控件的布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42251202/