выровнена форма группы с остальной частью компонентов в Bootstrap CSS

Question

Я имею горизонтальную форму с кнопками и вводом текста в HTML, используя самозагрузку 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form role="form" method="post" class="form-horizontal form" > 
 
<div class="container-fluid"> 
 
<div class="row" > 
 
<div class="col-md-12" > 
 

 
<div class="form-group" > 
 
    <label class="col-md-1 control-label" for="username" >User Name</label> 
 
    <div class="col-md-6" > 
 
     <input class="form-control" type="text" id="username" name="username" /> 
 
    </div> 
 
</div> 
 

 
<div class="col-md-offset-1" > 
 
    <div class="form-group" > 
 
     <button class="btn-warning btn" type="button" id="add" name="add" >Add User</button> 
 
    </div> 
 
</div> 
 

 
</div> 
 
</div> 
 
</div> 
 
</form>

Если я разместить кнопки внутри форм-группа, кнопки не выровнены с другими компонентами, из-за этого:

.form-horizontal .form-group { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

(вы можете увидеть его в полном объеме)

Как это исправить? Нужно ли создавать пользовательский класс?

Answer 1

Если посмотреть на бутстрэпами примеры форм: http://getbootstrap.com/css/#forms он оборачивает только label и input элементы стиля вместе в form-group

Так или удалить оболочку от вашего button, и все должно быть в порядке.

т.е.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
<form role="form" method="post" class="form-horizontal form" > 
<div class="container-fluid"> 
<div class="row" > 
<div class="col-md-12" > 

<div class="form-group" > 
    <label class="col-md-1 control-label" for="username" >User Name</label> 
    <div class="col-md-6" > 
     <input class="form-control" type="text" id="username" name="username" /> 
    </div> 
</div> 

<div class="col-md-offset-1" > 
    <button class="btn-warning btn" type="button" id="add" name="add" >Add User</button> 
</div> 

</div> 
</div> 
</div> 
</form> 

EXAMPLE

---

В качестве альтернативы, переключите form-group быть обертка col-md-offset-1, а не наоборот, и дать ваш col-md-offset-1 класс col-md-11

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
<form role="form" method="post" class="form-horizontal form" > 
<div class="container-fluid"> 
<div class="row" > 
<div class="col-md-12" > 

<div class="form-group" > 
    <label class="col-md-1 control-label" for="username" >User Name</label> 
    <div class="col-md-6" > 
     <input class="form-control" type="text" id="username" name="username" /> 
    </div> 
</div> 

<div class="form-group" > 
    <div class="col-md-offset-1 col-md-11" > 
     <button class="btn-warning btn" type="button" id="add" name="add" >Add User</button> 
    </div> 
</div> 

</div> 
</div> 
</div> 
</form> 

EXAMPLE

Answer 2

Добавить тег формы

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form role="form" method="post" class="form-horizontal form" > 
 
<div class="container-fluid"> 
 
<div class="row" > 
 
<div class="col-md-12" > 
 
<form role="form"> 
 
<div class="form-group" > 
 
    <label class="col-md-1 control-label" for="username" >User Name</label> 
 
    <div class="col-md-6" > 
 
     <input class="form-control" type="text" id="username" name="username" /> 
 
    </div> 
 
</div> 
 
<button class="btn-warning btn" type="button" id="add" name="add" >Add User</button> 
 

 
</form> 
 
</div> 
 
</div> 
 
</div> 
 
</form>