Блог

https://plnkr.co/edit/vWR7kK9MQw4nyciRt1Bj?p=preview

Я загрузил свой код в plunker. До размера медиа-экрана 768 пикселей, форма 1260 пикселей является адаптивной.Мне нужно иметь по крайней мере три поля ввода на строку на уровне медиа-экрана 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) amp;amp; 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-* class .

Итак, чтобы иметь 3 поля ввода в строке, вы должны добавить col-xs-4 класс в группу форм.

Нравится — class="form-group fields col-xs-4 col-sm-2"

Кроме того, для приведенного ниже 768px разрешения вам необходимо удалить данное дополнение width к .fields классу as, а также .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

используйте col-ms — (mid-small) между 480 и 768

И если вам нужно 3, вы должны делать class="col-ms-4" и делать class="row" вокруг тех 3 разделов, которые вы хотите в одной строке