Как расширить загрузочного 3 поле ввода

Question

Я работаю с начальной загрузкой 3 и пытаюсь собрать воедино базовый макет для приложения колб. до сих пор у меня есть:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="content"> 
     <div class="pull-middle"> 
      <h1 class="page-header">Create an awesome App template with Bootstrap.</h1> 
      <div class="container"> 
      {% block content %} 
      {% endblock %} 
      </div> 
      <div class="row"> 
      <div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4"> 
       <div class="panel panel-default "> 
       <div class="panel-body "> 
        <form action="#" role="form"> 
        <div class="input-group "> 
         <input type="email" class="form-control" placeholder="Email Address" required> 
         <span class="input-group-btn"> 
         <button class="btn btn-success btn-circle" type="submit">Sign up for free</button> 
         </span> 
        </div> 
        </form> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <footer class="footer text-center"> 
     <div class="container"> 
      <small>© Copyright 2015. </small> 
     </div> 
     </footer> 

Я хочу расширить форму адреса электронной почты, оставив зеленую кнопку как есть. Как я могу это сделать?

Answer 1

Вы используете классы Bootstrap Grid неправильно. Поле ввода ввода получает пространство, которое было предоставлено родительским div, используя класс сетки col-lg-4, что делает его col-lg-6 предоставит больше места для его дочерних div.

Таким образом, использование этих классов поможет текстовому полю занимать больше места.

col-xs-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3