Изменение размера небольших форм на больших страницах

Question

У меня есть эта форма профиля пользователя, которая довольно маленькая.

Дело в том, что форма/поля должны быть небольшими, но страница огромна. Мне не нужны эти поля, занимающие всю страницу.

Так что я хотел бы сделать, чтобы поля были меньше.

Текущая структура 2/12 к меню и 10/12 к форме.

Один из способов, которым я мог это сделать, - просто разместить форму внутри меньшего столбца, например 4/12 или 5/12. Но проблема заключается в том, что страница изменяется на смартфон, например, форма должна занимать всю страницу снова, например 10/12.

Где страница:

Где код:

<div class="row"> 
 

 
     <div class="col-md-12"> 
 

 
      <div class="row"> 
 

 
      <div class="col-md-2"> 
 

 
       <ul class="list-group"> 
 
       <a href="#" class="list-group-item"><strong>Profile</strong></a> 
 
       <a href="my-account-password.html" class="list-group-item">Password</a> 
 
       </ul> 
 

 
      </div> <!--/col-md-2--> 
 

 
      <div class="col-md-10"> 
 

 
       <form> 
 
       <div class="form-group"> 
 
        <label for="inputName">Name:</label> 
 
        <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E."> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="inputLastName">Last Name:</label> 
 
        <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="inputTitle">Title:</label> 
 
        <input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="inputEmail">Email:</label> 
 
        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="wilie@acmecorp.com"> 
 
       </div> 
 
       <div class="form-group bottom-buffer"> 
 
        <label for="selectEmail">Notifications:</label> 
 
        <select class="form-control" id="selectEmailNotifications"> 
 
        <option>None</option> 
 
        <option>Daily</option> 
 
        <option>Weekly</option> 
 
        <option selected>Monthly</option> 
 
        </select> 
 
        <p class="help-block">Receive email notifications with all the most important metrics of your business.</p> 
 
       </div> 
 
       <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button> 
 
       </form> 
 

 
      </div> <!--/col-md-10--> 
 

 
      </div><!--/row --> 
 

 
     </div><!--col-md-12--> 
 

 
     </div><!--/row-->

Answer 1

Если вы хотите изменить его в небольших экранах, вы должны использовать Col-хз (дополнительные мелкие устройства и телефоны (< 768px)) и col-sm (небольшие устройства и планшеты (≥768px)) классы. И если вы не хотите, чтобы ваша форма охватывала всю страницу по горизонтали, вы также можете использовать класс col -..- offset- .. для предоставления поля вашей форме.

<div class="row"> 

    <div class="col-md-12 col-sm-12 col-xs-12"> 

     <div class="row"> 

     <div class="col-md-2 col-sm-2 col-xs-2"> 

      <ul class="list-group"> 
      <a href="#" class="list-group-item"><strong>Profile</strong></a> 
      <a href="my-account-password.html" class="list-group-item">Password</a> 
      </ul> 

     </div> <!--/col-md-2 col-sm-2 col-xs-2--> 

     <div class="col-md-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2"> 

      <form> 
      <div class="form-group"> 
       <label for="inputName">Name:</label> 
       <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E."> 
      </div> 
      <div class="form-group"> 
       <label for="inputLastName">Last Name:</label> 
       <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote"> 
      </div> 
      <div class="form-group"> 
       <label for="inputTitle">Title:</label> 
       <input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO"> 
      </div> 
      <div class="form-group"> 
       <label for="inputEmail">Email:</label> 
       <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="wilie@acmecorp.com"> 
      </div> 
      <div class="form-group bottom-buffer"> 
       <label for="selectEmail">Notifications:</label> 
       <select class="form-control" id="selectEmailNotifications"> 
       <option>None</option> 
       <option>Daily</option> 
       <option>Weekly</option> 
       <option selected>Monthly</option> 
       </select> 
       <p class="help-block">Receive email notifications with all the most important metrics of your business.</p> 
      </div> 
      <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button> 
      </form> 

     </div> <!--/col-md-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2--> 

     </div><!--/row --> 

    </div><!--col-md-12 col-sm-12 col-xs-12--> 

    </div><!--/row--> 

Answer 2

Если Вы используете самозагрузки Framework вы можете определить поведение коллектив- DIV с помощью COL-хз для мобильных, цв-см для портретной таблетки и Col-мДа для ландшафтной таблетки. См. http://getbootstrap.com/css/#grid

Если вы считаетесь ограниченным определением по умолчанию, вы также можете расширить систему сетки, записывая более конкретные мультимедийные запросы, например. для экрана xxl