几天来，他一直无法找到为什么使用 Java Server Pages 和 Bootstrap 3 制作的视图没有正确显示。我查看了代码，但无法弄清楚错误是什么，Bootstrap 库正确加载它们并且jQuery 也是如此。
问题是，在大屏幕上，您会看到一个奇怪的换行符分隔 Gender 字段并在其标签下方看到一条线，使表单看起来很尴尬。像这样的东西：
我附上代码（要查看错误，请单击“全屏”）：
<!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>如果有人试图将附加的代码保存为 HTML 页面，你可以明白我的意思。有谁知道我该如何解决它？
根据Bootstrap手册，我认为您需要将表单组类与一行分开
例子：