我正在創建一個窗體，當我添加一個選擇框佈局不按預期工作。選擇框項目正在解決問題。我創建了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