我正在创建一个窗体，当我添加一个选择框布局不按预期工作。选择框项目正在解决问题。我创建了JSFiddle here布局问题与窗体组和控制在引导3
我把我的元素放在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>
它似乎工作正常，当我添加选择。
<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>
直接在Chrome看起来。标签是col-4，select是col-8嵌套在col-6中。占表格的50％。你能否进一步解释你遇到的问题？ –
布局越来越摧毁，你可以在小提琴里看到 –
有什么问题？在第3行的左边而不是右边（选择后添加）的第5组“Rango Monto Deuda Real”？ “不按预期工作”和“越来越摧毁”我不清楚...... – FelipeAls