https://plnkr.co/edit/vWR7kK9MQw4nyciRt1Bj?p=preview
我已经在 plunker 中上传了我的代码。直到媒体屏幕尺寸 768px,1260px 表单响应。我需要在媒体屏幕级别 480px-760px 每行至少有三个输入字段,但我得到的只是每行一个字段。之后,在每行最小尺寸为 480 像素的媒体屏幕上,只有一个字段出现。需要帮助。
我尝试调整字段的宽度。 供您引用的 Css 和 Html 代码如下:
HTML:
<form name="tForm" role="form" data-ng-init="resp()">
<div class="row newRow">
<div class="form-group fields col-sm-2" ng-class="{'has-error': (tForm.fname.$dirty || tForm.$submitted) && tForm.fname.$invalid }">
<label for="fname">FIRST NAME *</label>
<br>
<input type="text" name="fname" class="form-control1 col-sm-2" autocomplete="off" ng-required="true" ng-model="firstName" ng-pattern="/^[a-zA-Z ]*$/" ng-minlength=1/>
</div>
<div class="form-group fields col-sm-2">
<label>LAST NAME *</label>
<input type="text" name="lname" class="form-control1" autocomplete="off" ng-required="true" ng-model="lastName" />
</div>
<div class="form-group fields col-sm-2">
<label>GENDER *</label>
<br>
<select name="gender" class="form-control1 drop" required ng-model="gender" placeholder="select">
<option value='' disabled selected>Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="transpant">Transgender</option>
</select>
</div>
<div class="form-group fields col-sm-2">
<label>DOB</label>
<div class="form-group">
</div>
</div>
</div>
</form>
CSS:
@media screen and (min-width: 480px) {
.newrow {
width: 100;
}
.firstfields {
margin-top: 10px;
margin-left: 5px;
}
.drop2 {
padding: 6px;
padding-right: 3em;
border: none;
color: black;
width: 85%;
}
.fields {
border: 1px #A9A9A9 solid;
width: 200px;
margin: 1em;
height: 75px;
color: #A9A9A9;
font-size: 11px;
}
input[type=text] {
width: 65%;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #fff;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=email] {
width: 65%;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #fff;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=email]:focus {
border: 3px solid #fff;
}
.drop {
width: 160px;
}
.drop select:focus {
box-shadow: 0 0 3pt 2pt #fff!important;
}
.drop1 {
width: 85%;
padding: 6px;
padding-right: 6em;
border: none;
color: black;
}
input[type=text]:focus {
border: 3px solid #fff;
}
.newpagebody {
background-size: auto;
}
}
最佳答案
针对低于 768px
的特定屏幕尺寸宽度,你可以使用col-xs-*
类。
因此,要使每行有 3 个输入字段,您应该添加 col-xs-4
类到表单组。
喜欢-
class="form-group fields col-xs-4 col-sm-2"
此外,对于以下 768px
您需要删除额外的分辨率 width
到 .fields
以及.newrow
类。
如下-
@media screen and (min-width: 480px)
.newrow {
/* width: 100; */ /* removed */
}
@media screen and (min-width: 480px)
.fields {
border: 1px #A9A9A9 solid;
/* width: 200px; */ /* removed */
margin: 0em; /* editied - to avoid impact on responsiveness */
height: 75px;
color: #A9A9A9;
font-size: 11px;
}
@media screen and (min-width: 480px)
input[type=text] {
width: 100%; /* edited */
/* padding: 12px 20px; */ /* removed */
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #fff;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
@media screen and (min-width: 480px)
.drop {
width: 100%; /* edited */
}
有关响应式网格系统的更多信息,请阅读 - http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
关于html - 使用 bootstrap css 的响应式表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39851435/