Question

在这段代码中，我想让这个html表单正确响应＆amp;避免重叠（如图所示）。如果你运行代码，你会看到组件[指定＆amp; “指定代码”彼此重叠并显示在错误的位置。然而，当您最小化浏览器屏幕时，这些组件会响应，这些组件将从内嵌对齐垂直对齐。但组件[Faculty / Institute＆amp; 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框，名称，教师/学院框教师/研究所代码等正确定位看下面给出的第二张图片。] [ enter image description here ] 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>

Answer 1

这样的事情： 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个组件组合在一起就适合整个容器。

如何使这个HTML组件具有相应的响应性＆amp;避免使用Bootstrap重叠？

1 个答案: