这是我的雇主页面代码。引导程序col-xs无法正常工作。虽然我将浏览器的大小减小到xs宽度，但文本框的大小并没有变化。该框实际上超出了面板限制。
有人可以帮我解决问题吗？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title> Employer Registration Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="empreg1.js"></script>
<script type="text/javascript" src="try2.js"></script>
<style type ="text/css">
sup{
color:red;
}
.paddi{
padding:10px;
}
input[type="text"] {
width: 300px;
}
input[type="password"]{
width:300px;
}
#errorBox{
color:red;
}
.mar{
margin-top:100px;
}
</style>
</head>
<body>
<div class="container">
<div class= "col-xs-offset-6 col-xs-6 paddi">
<a href="#"><button class="btn btn-lg"><strong>Already a member. Please Sign In</strong></button>
</a>
</div>
<div class="mar">
<form class="form-horizontal" role="form" method="POST" action="#">
<div class="panel panel-primary">
<div class="panel-heading text-center">
<h3>
New Client Registration
</h3>
</div>
<div class="panel-body">
<div id="errorBox"></div>
<div class="page-header paddi">
<h4>
Create your Account Details
</h4>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="email">
<sup>*</sup>Email ID:
</label>
<div class="col-xs-7">
<input type="text" name= "eid" id="eid" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="pwd">
<sup>*</sup>Create a Password for your account: </label>
<div class="col-xs-7">
<input type="password" name="pwd" id="pwd" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cpwd">
<sup>*</sup>Confirm Password: </label>
<div class="col-xs-7">
<input type="password" name="cpwd" id="cpwd" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cname">
<sup>*</sup>Company Name: </label>
<div class="col-xs-7">
<input type="text" name="cname" id="cname"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="ctype">
<sup>*</sup>Company Type:
</label>
<div class="col-xs-7">
<label class="radio-inline">
<input type="radio" name= "ctype" class="rdo"/>Company </label>
<label class="radio-inline">
<input type="radio" name="ctype" class="rdo" /> Consultant </label>
<label class="radio-inline">
<input type="radio" name ="ctype" class="rdo" /> Recruiter </label>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="itype">
<sup>*</sup>Industry Type:
</label>
<div class="col-xs-7">
<select id="itype">
<option value="">Select...</option>
<option value="Agri">Agri</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="lcn">
Location: </label>
<div class="col-xs-7">
<input type="text" name="lcn" id="lcn" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cntry">
<sup>*</sup>Country: </label>
<div class="col-xs-7">
<select id="cntry">
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cnum">
<sup>*</sup>Contact Number:
</label>
<div class="col-xs-7">
<input type="text" name="cnum" id="cnum"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cpnm">
<sup>*</sup>Contact Person Name:
</label>
<div class="col-xs-7">
<input type="text" name="cpnm" id="cpnm" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-3 text-right" for="acd"> <sup>*</sup>About Company:
</label>
<div class="col-xs-7">
<textarea class="form-control" rows="5" id="acd"></textarea>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls col-xs-offset-3 col-xs-2">
<button class="btn btn-success" id="reg">Register</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您可以使“登录”按钮更窄，因为其内容无法换行。 看看我的解决方案：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title> Employer Registration Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="empreg1.js"></script>
<script type="text/javascript" src="try2.js"></script>
<style type ="text/css">
sup{
color:red;
}
.paddi{
padding:10px;
}
input[type="text"] {
width: 300px;
}
input[type="password"]{
width:300px;
}
#errorBox{
color:red;
}
.mar{
margin-top:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class= "col-xs-offset-6 col-xs-6 paddi">
Already a member? Please <a href="#"><button class="btn btn-lg"><strong>Sign In</strong></button>
</a>
</div>
<div class="mar">
<form class="form-horizontal" role="form" method="POST" action="#">
<div class="panel panel-primary">
<div class="panel-heading text-center">
<h3>
New Client Registration
</h3>
</div>
<div class="panel-body">
<div id="errorBox"></div>
<div class="page-header paddi">
<h4>
Create your Account Details
</h4>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="email">
<sup>*</sup>Email ID:
</label>
<div class="col-xs-7">
<input type="text" name= "eid" id="eid" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="pwd">
<sup>*</sup>Create a Password for your account: </label>
<div class="col-xs-7">
<input type="password" name="pwd" id="pwd" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cpwd">
<sup>*</sup>Confirm Password: </label>
<div class="col-xs-7">
<input type="password" name="cpwd" id="cpwd" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cname">
<sup>*</sup>Company Name: </label>
<div class="col-xs-7">
<input type="text" name="cname" id="cname"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="ctype">
<sup>*</sup>Company Type:
</label>
<div class="col-xs-7">
<label class="radio-inline">
<input type="radio" name= "ctype" class="rdo"/>Company </label>
<label class="radio-inline">
<input type="radio" name="ctype" class="rdo" /> Consultant </label>
<label class="radio-inline">
<input type="radio" name ="ctype" class="rdo" /> Recruiter </label>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="itype">
<sup>*</sup>Industry Type:
</label>
<div class="col-xs-7">
<select id="itype">
<option value="">Select...</option>
<option value="Agri">Agri</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="lcn">
Location: </label>
<div class="col-xs-7">
<input type="text" name="lcn" id="lcn" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cntry">
<sup>*</sup>Country: </label>
<div class="col-xs-7">
<select id="cntry">
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cnum">
<sup>*</sup>Contact Number:
</label>
<div class="col-xs-7">
<input type="text" name="cnum" id="cnum"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cpnm">
<sup>*</sup>Contact Person Name:
</label>
<div class="col-xs-7">
<input type="text" name="cpnm" id="cpnm" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-3 text-right" for="acd"> <sup>*</sup>About Company:
</label>
<div class="col-xs-7">
<textarea class="form-control" rows="5" id="acd"></textarea>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls col-xs-offset-3 col-xs-2">
<button class="btn btn-success" id="reg">Register</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
这是另一种解决方案，其中定义为col-xs-12的单元格添加了引导程序类text-right以将其内容放到右侧
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title> Employer Registration Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="empreg1.js"></script>
<script type="text/javascript" src="try2.js"></script>
<style type ="text/css">
sup{
color:red;
}
.paddi{
padding:10px;
}
input[type="text"] {
width: 300px;
}
input[type="password"]{
width:300px;
}
#errorBox{
color:red;
}
.mar{
margin-top:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class= "col-xs-12 paddi text-right">
<a href="#"><button class="btn btn-lg"><strong>Already a member. Please Sign In</strong></button>
</a>
</div>
<div class="mar">
<form class="form-horizontal" role="form" method="POST" action="#">
<div class="panel panel-primary">
<div class="panel-heading text-center">
<h3>
New Client Registration
</h3>
</div>
<div class="panel-body">
<div id="errorBox"></div>
<div class="page-header paddi">
<h4>
Create your Account Details
</h4>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="email">
<sup>*</sup>Email ID:
</label>
<div class="col-xs-7">
<input type="text" name= "eid" id="eid" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="pwd">
<sup>*</sup>Create a Password for your account: </label>
<div class="col-xs-7">
<input type="password" name="pwd" id="pwd" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cpwd">
<sup>*</sup>Confirm Password: </label>
<div class="col-xs-7">
<input type="password" name="cpwd" id="cpwd" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cname">
<sup>*</sup>Company Name: </label>
<div class="col-xs-7">
<input type="text" name="cname" id="cname"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="ctype">
<sup>*</sup>Company Type:
</label>
<div class="col-xs-7">
<label class="radio-inline">
<input type="radio" name= "ctype" class="rdo"/>Company </label>
<label class="radio-inline">
<input type="radio" name="ctype" class="rdo" /> Consultant </label>
<label class="radio-inline">
<input type="radio" name ="ctype" class="rdo" /> Recruiter </label>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="itype">
<sup>*</sup>Industry Type:
</label>
<div class="col-xs-7">
<select id="itype">
<option value="">Select...</option>
<option value="Agri">Agri</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="lcn">
Location: </label>
<div class="col-xs-7">
<input type="text" name="lcn" id="lcn" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cntry">
<sup>*</sup>Country: </label>
<div class="col-xs-7">
<select id="cntry">
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cnum">
<sup>*</sup>Contact Number:
</label>
<div class="col-xs-7">
<input type="text" name="cnum" id="cnum"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 text-right" for="cpnm">
<sup>*</sup>Contact Person Name:
</label>
<div class="col-xs-7">
<input type="text" name="cpnm" id="cpnm" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-3 text-right" for="acd"> <sup>*</sup>About Company:
</label>
<div class="col-xs-7">
<textarea class="form-control" rows="5" id="acd"></textarea>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls col-xs-offset-3 col-xs-2">
<button class="btn btn-success" id="reg">Register</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
当然，您不能将宽度PX用于具有响应式布局的任何元素。或者您必须使用媒体标记，为所有设备定义它。最简单的解决方案是删除输入宽度：
input[type="text"] {
width: 300px;
}
和密码相同。使用宽度100％或定义介质最大/最小宽度尺寸。例如：
input[type="text"] {
width: 300px;
}
@media (max-width:500px){
input[type="text"] {
width: 150px;
}
}
使用此代码，在小于500px的设备上，输入长度等于150px。下面是所有设备的bootstrap默认大小：
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}