Начальная установка входной группы Bootstrap

Question

Я начинаю с вуду CSS, JS и HTML.

На данный момент у меня есть конструкции вроде этого:

.... 
<div class="signup row_centered sr_simple" data-spy="affix" data-offset-top="300"> 
    <form class="form-inline" role="form" id="signup"> 
     <div class="form-group"> 
      <div class="input-group" id="signup_inputs"> 
       <input type="email" class="form-control input-lg" name="EMAIL" id="signup_email" placeholder="Enter email address..."> 
       <span class="input-group-btn"> 
        <button class="btn btn-default fade_signup input-lg btn-warning" type="submit" id="signup_button">Get Early Access!</button> 
       </span> 
      </div> 
     </div> 
    </form> 
</div> 
... 

И я хочу, рядная форма группы, чтобы быть в центре, но с определенной шириной. Значение col-xx-yy не имеет значения. Таким образом, единственный способ определить ширину всей форме это (я думаю) хак:

@media (min-width : 768px) { 
#signup_email { 
    width : 450px; 
} 
} 

@media (max-width : 767px) { 
    #signup_inputs { 
    width  : auto; 
    margin-left : 5%; 
    margin-right : 5%; 
    } 
} 

Как я должен установить ширину формы ввода правильно для разной ширины? Или мой подход правильный?

Answer 1

Похоже, что нет необходимости в необходимости form-inline (у вас есть только один вход без метки). Удалите это и используйте правила, которые вы готовы, вместе с простым margin: auto, и вы должны быть хорошими.

Примечание: Для различных входных размеров в пределах ввода-группы, использовать Input-Group-Sizing

Рабочий пример фрагмента.

@media (min-width: 768px) { 
 
    .signup { 
 
    width: 450px; 
 
    margin: auto; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .signup { 
 
    width: auto; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="signup"> 
 
    <form role="form"> 
 
    <div class="form-group"> 
 
     <div class="input-group input-group-lg"> 
 
     <input type="email" class="form-control" name="email" placeholder="Enter email address..."> 
 
     <span class="input-group-btn"> 
 
      <button class="btn btn-warning" type="submit">Get Early Access!</button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>