未對齊形式組與組件的引導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>