For several days he has not been able to find why a view, made with Java Server Pages and Bootstrap 3, is not displayed correctly. I have reviewed the code and I cannot figure out what the error is, the Bootstrap libraries load them correctly and so does jQuery.
The problem is that on large screens, you see a weird line break separating the Gender field and seeing a line below its label, making the form look awkward. Something like that:
I attach the code (to see the error click on "Full Screen"):
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<title>ABM de Afiliados</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="text-muted">UOM</h3>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Crear Afiliado</h3>
</div>
<div class="panel-body">
<form action="afiliado" method="post">
<div class="form-group">
<label class="col-sm-1 control-label">Nº DNI</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="dni" required="required" value="" placeholder="D.N.I.">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="nombre">Nombre</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="nombre" required id="nombre" value="" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="domicilio">Domicilio</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="domicilio" required id="domicilio" value="" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="localidad">Localidad</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="localidad" required id="localidad" value="" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="telefono">Telefono</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="telefono" required id="telefono" value="" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="mail">Mail</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="mail" required id="mail" value="" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="cuil">CUIL</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="cuil" required id="cuil" value="" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="fecnac">Fecha Nacimiento</label>
<div class="col-sm-2">
<input type="date" class="form-control" name="fecnac" required id="fecnac" value="" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="sexo">Sexo</label>
<div class="col-sm-2">
<SELECT size=1 cols=2 NAME="sexo" id="sexo">
<OPTION value=1 selected="Masculino"> Masculino</option>
<OPTION value=2> Femenino</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default">Guardar</button>
</form>
</div>
</div>
</div>
</body>
</html>If someone tries to save the attached code as an HTML page, you can see what I mean. Does anyone have an idea how I can fix it?
Based on the Bootstrap manual I think what you need is to separate your form-group classes with a row
Example: