未对齐形式组与组件的引导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-group，按钮与其他组件不对齐，因此：

.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>