如何使此html组件正确响应&；使用引导避免重叠？_Html_Twitter Bootstrap

如何使此html组件正确响应&；使用引导避免重叠？

html twitter-bootstrap

如何使此html组件正确响应&；使用引导避免重叠？,html,twitter-bootstrap,Html,Twitter Bootstrap,在此代码中，我希望使此html表单正确响应并避免重叠（如图所示）。如果运行代码，您将看到组件[指定和指定代码]相互重叠并显示在错误的位置。但是，当您最小化浏览器屏幕时，这些组件会响应，这些组件从“内联对齐”变为“垂直对齐”。但是组件[学院/学院和学院/学院代码]没有相互重叠并显示在正确的位置。但是，这些组件在最小化浏览器屏幕时没有响应，这些组件将不会从“内联对齐”变为“垂直对齐”。因此，在这种情况下，我如何使所有这些组件正确响应[以便它们可以在小屏幕上垂直对齐]，同时在正确位置[与此处显示的其他

在此代码中，我希望使此html表单正确响应并避免重叠（如图所示）。如果运行代码，您将看到组件[指定和指定代码]相互重叠并显示在错误的位置。但是，当您最小化浏览器屏幕时，这些组件会响应，这些组件从“内联对齐”变为“垂直对齐”。但是组件[学院/学院和学院/学院代码]没有相互重叠并显示在正确的位置。但是，这些组件在最小化浏览器屏幕时没有响应，这些组件将不会从“内联对齐”变为“垂直对齐”。因此，在这种情况下，我如何使所有这些组件正确响应[以便它们可以在小屏幕上垂直对齐]，同时在正确位置[与此处显示的其他组件一样]。我只使用这个文件。需要进行哪些修改才能解决此问题？请提出建议。请让我了解更多信息。谢谢。

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>


员工加入信息
函数updateText（类型）{
变量id=类型+“文本”；
document.getElementById（id）.value=document.getElementById（type）.value；
}
.bs示例{
利润率：20px；
}
员工加入信息表
员工ID
名称
任命
选择名称
主席
标识代码
学院/学院
选择教员/学院
教员1
教员2
教员/学院代码

在查看了有用的注释后，我修改了代码。但与其他输入字段相比，代码的位置仍然不正确。[例如输入框：员工ID框、姓名、教员/学院框教员/学院代码等位置正确，请参见下面给出的第二幅图。] [] 以下是修改后的引导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>


员工加入信息
函数updateText（类型）{
变量id=类型+“文本”；
document.getElementById（id）.value=document.getElementById（type）.value；
}
.bs示例{
利润率：20px；
}
员工加入信息表
员工ID
名称
任命
选择名称
主席
标识代码
学院/学院
选择教员/学院
教员1
教员2
教员/学院代码

类似这样的内容：


任命
选择名称
主席
标识代码

基本上，为小屏幕（全行范围）定义col-xs-12，为更高分辨率定义小于col-xs-12的内容。我使用了col-md-2和col-md-4，因此所有4个组件组合在一起都适合整个容器。

谢谢@cen。但我仍然遇到显示定位问题。请再次查看我的帖子，我只是更新了它。是的，我没有把它做得完美，只是举个例子。您可以尝试向表单包装器添加额外的填充，并在标签上使用“向右拉”（float right）使其右对齐。我还建议将其他输入放在同一行-列结构中，以便它们都位于同一类型的容器中，并且行为也相同。

<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>