在这段代码中,我想让这个html表单正确响应&避免重叠(如图所示)。如果你运行代码,你会看到组件[指定& “指定代码”彼此重叠并显示在错误的位置。然而,当您最小化浏览器屏幕时,这些组件会响应,这些组件将从内嵌对齐垂直对齐。但组件[Faculty / Institute& amp;教师/学院代码]不会相互重叠并显示在正确的位置。但是,当您最小化浏览器屏幕时,这些组件不响应,这些组件将不会从内联对齐垂直对齐。所以,在这种情况下,我如何制作所有这些组件正确响应 [以便它们可以使组件在小屏幕上垂直对齐]并同时在正确位置 [与此处显示的其他组件一样] .I只需使用此单个文件。需要进行哪些修改才能解决这个问题?请建议。请告诉我以获取更多信息。谢谢。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Employee Joining Information</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Comments -->
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
document.getElementById(id).value = document.getElementById(type).value;
}
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal container" style="border: 1px solid; padding: 10px">
<h1 align="center">Employee Joining Information Form</h1>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Employee ID</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="eid">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="nm">
</div>
</div>
<div class="form-group " id="DesignationForm">
<div class="form-inline">
<label type="text" class="control-label " >Designation</label>
<div class="form-group">
<select class="form-control col-xs-5" id="designation" onchange="updateText('designation')" >
<option value="" disabled selected>Select Designation</option>
<option value="04">Chairman</option>
</select>
</div>
<label type="text" class="control-label " >Designation Code </label>
<div class="form-group ">
<input type="text" value="" id="designationText" />
</div>
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Faculty/Institute</label>
<div class="col-xs-5">
<select class="form-control col-xs-5" id="facultyinstitute" onchange="updateText('facultyinstitute')">
<option value="" disabled selected>Select Faculty / Institute</option>
<option value="10" >Faculty 1</option>
<option value="20">Faculty 2</option>
</select>
</div>
<div class="form-group">
<div class="col-xs-5">
<label type="text" class="control-label " >Faculty/Institute Code </label>
<input type="text" value="" id="facultyinstituteText" />
</div>
</div>
</div>
</div>
</div>
在查看有用的评论后,我修改了代码。但仍然是与其他输入字段相比未正确定位 [例如输入框:员工ID框,名称,教师/学院框教师/研究所代码等正确定位看下面给出的第二张图片。] [] 2 这是修改后的bootstrap html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Employee Joining Information</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Comments -->
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
document.getElementById(id).value = document.getElementById(type).value;
}
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal container" style="border: 1px solid; padding: 10px">
<h1 align="center">Employee Joining Information Form</h1>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Employee ID</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="eid">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="nm">
</div>
</div>
<div class="form-group " id="DesignationForm">
<div class="row">
<div class="col-xs-12 col-md-2">
<label type="text" class="control-label " >Designation</label>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<select class="form-control col-xs-5" id="designation" onchange="updateText('designation')" >
<option value="" disabled selected>Select Designation</option>
<option value="04">Chairman</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-2">
<label type="text" class="control-label " >Designation Code </label>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group ">
<input type="text" value="" id="designationText" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Faculty/Institute</label>
<div class="col-xs-5">
<select class="form-control col-xs-5" id="facultyinstitute" onchange="updateText('facultyinstitute')">
<option value="" disabled selected>Select Faculty / Institute</option>
<option value="10" >Faculty 1</option>
<option value="20">Faculty 2</option>
</select>
</div>
<div class="form-group">
<div class="col-xs-5">
<label type="text" class="control-label " >Faculty/Institute Code </label>
<input type="text" value="" id="facultyinstituteText" />
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
这样的事情: http://plnkr.co/edit/AyjY07y26eQ2kDK23vis?p=preview
<div class="form-group " id="DesignationForm">
<div class="row">
<div class="col-xs-12 col-md-2">
<label type="text" class="control-label " >Designation</label>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<select class="form-control col-xs-5" id="designation" onchange="updateText('designation')" >
<option value="" disabled selected>Select Designation</option>
<option value="04">Chairman</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-2">
<label type="text" class="control-label " >Designation Code </label>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group ">
<input type="text" value="" id="designationText" />
</div>
</div>
</div>
</div>
基本上,为小屏幕(全行跨度)定义col-xs-12,为较高分辨率定义少于col-xs-12。我使用了col-md-2和col-md-4,因此所有4个组件组合在一起就适合整个容器。