使用引導程序css響應窗體

https://plnkr.co/edit/vWR7kK9MQw4nyciRt1Bj?p=preview 使用引導程序css響應窗體

我已經上傳我的代碼在plunker。直到媒體屏幕大小768px，1260px形式是響應式的。我需要在媒體屏幕級別480px-760px每行至少有三個輸入字段，但我所得到的只是每行一個字段。之後，在媒體屏幕上，每行至少有480px的字段即將到來。需要幫助。

我試着調整字段的寬度。供您參考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; 
    } 
}

來源

2016-10-04 Nicoleta Wilskon

請通過更具體的讓您的要求明確。 –

使用COL-MS - （中小）480和768之間

如果你想要3，你應該做class="col-ms-4"並做class="row"圍繞你想要在同一行中的3個div

來源

2016-10-04 12:28:20 Moe

如果要將指定的屏幕尺寸定位在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

來源

2016-10-04 13:22:10

感謝您的協助。我解決了這個問題。 –

使用引導程序css響應窗體

回答

相關問題