Question

在这段代码中，我想删除删除多余的空格（如图所示），并且下拉列表显示在错误的位置（它应该在列表的正下方）。我只是使用这个单一的flie.what需要修改才能解决这个问题？请建议。请告诉我以获取更多信息。谢谢。 Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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> 
<style type="text/css">
    .bs-example{
    	margin: 2px;
    }
</style>
</head>
<body>
<h1>Employee Joining Information Form</h1>

<div class="bs-example">	
     <form class="form-horizontal">

        <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">
            <label type="text" class="control-label col-xs-2">Designation</label>
        <div class="dropdown" >
		
		<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Choose Designation <span class="caret"></span></button>
		<ul class="dropdown-menu">		
		<li ><a href="#">Manager</a></li>
		<li ><a href="#">Officer</a></li>
		<li ><a href="#">Receptionist</a></li>				
		</ul>
		</div>
		
        </div>
        
    </form>
</div>
</body>
</html>

Answer 1

问题是您的下拉列表需要包含在<div class="col-xs-5"></div>

中

＆＃13;

.bs-example{
	margin: 2px;
}
label.control-label.col-xs-2 {
    text-align: left;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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> 
</head>
<body>
<h1>Employee Joining Information Form</h1>

<div class="bs-example">	
     <form class="form-horizontal">

        <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">
            <label type="text" class="control-label col-xs-2">Designation</label>
            <div class="col-xs-5">
              <div class="dropdown" >
		
		<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Choose Designation <span class="caret"></span></button>
		<ul class="dropdown-menu">		
		<li ><a href="#">Manager</a></li>
		<li ><a href="#">Officer</a></li>
		<li ><a href="#">Receptionist</a></li>				
		</ul>
		      </div>
            </div>
        </div>
        
    </form>
</div>
</body>
</html>

＆＃13;

如何删除多余的空间＆amp;使用Bootstrap正确对齐下拉列表？

1 个答案: