引導3形式和形式最後一行的背景顏色

Question

在我們的表格中，我們嘗試：

1. 背景顏色的形式和
2. 背景顏色添加到窗體，通常的最後一行包含我們的按鈕。

問題是最後一行的背景顏色沒有正確對齊。你會看到最後一行的大小超出了表格的寬度。

請參閱：

http://jsfiddle.net/4ThKn/2/

正如你指出的黑色背景顏色不與形式粉色正確對齊。

下面是代碼，這是一樣的引導網站示例：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <form class="form-horizontal" role="form" style="background-color:pink"> 
       <div class="form-group"> 
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
        <div class="col-sm-10"> 
         <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
        <div class="col-sm-10"> 
         <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox">Remember me</label> 
         </div> 
        </div> 
       </div> 
       <div class="form-group" style="background-color: black"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-default">Sign in</button> 
         <button type="submit" class="btn btn-default">Ignore!</button> 
        </div> 
       </div> 
      </form> 
     </div> 
        <div class="col-md-6"> 
         I am just a sample 
        </div> 
    </div> 
</div> 

Answer 1

的問題是每個表單組有左，右邊距爲-15px，因此預計黑色部分比粉色部分寬30px。

要解決它，我做了如下：

<div style="background-color: black; margin-left: 0px; margin-right: 0px;" class="form-group"> 

參考：https://github.com/morteza/bootstrap-rtl/issues/20

Answer 2

倒置你的div試試這個：

<div class="col-sm-offset-2 col-sm-10" style="background: black"> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-default">Sign in</button> 
     <button type="submit" class="btn btn-default">Ignore!</button> 
    </div> 
</div>