自舉水平表單具有額外的邊距

Question

包含select元素的列旁邊的按鈕看起來有一些額外的邊距。在我的實際網站上，它似乎是額外的正邊際，而在CodePen上它似乎是負面的。

我懷疑他們雖與標記，雖然同樣的問題。這裏的CodePen演示：http://codepen.io/anon/pen/gabZMo?editors=100

<div class="row"> 
    <div class="form-horizontal col-md-6"> 
    <div class="form-group"> 
     <div class="col-sm-8"> 
     <select class="form-control">...</select> 
     </div> 
     <button class="btn btn-default col-sm-4">New Event</button> 
    </div> 
    <button class="btn btn-primary btn-block">Free Quote</button> 
    </div> 
</div> 

我已經通過引導文檔看，這應該是正確的標記。我也嘗試在自己的專欄中包裝button，但這並沒有改變任何東西。

Answer 1

你不想直接在按鈕上使用col-sm-4。把btn-block上的按鈕，並堅持在col-sm-4 DIV，像這樣：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="form-horizontal col-md-6"> 
 
    <div class="form-group"> 
 
     <div class="col-xs-8"> 
 
     <select class="form-control"> 
 
      <option value="1">Test Event</option> 
 
      <option value="7">Test Event 2: The Re-testening</option> 
 
     </select> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <button class="btn btn-default btn-block">New Event</button> 
 
     </div> 
 
    </div> 
 
    <button class="btn btn-primary btn-block">Free Quote</button> 
 
    </div> 
 
</div>

Answer 2

你有3種選擇來解決問題，

把<button class="btn btn-primary btn-block">Free Quote</button>內<div class="form-group"></div>

原因按鈕是推左的權利，因爲col-sm-4選擇具有左右的填充15px這是越來越受btn-default選擇覆蓋padding: 6px 12px;

因此，添加自定義選擇器custom-margin並定義自定義CSS

1 HTML

<div class="row"> 
    <div class="form-horizontal col-md-6"> 
     <div class="form-group"> 
      <div class="col-sm-8"> 
       <select class="form-control">...</select> 
      </div> 
      <button class="btn btn-default col-sm-4 custom-margin">New Event</button> 
     </div> 
     <div class="form-group"> 
      <button class="btn btn-primary btn-block">Free Quote</button> 
     </div> 
    </div> 
</div> 

Fiddle 1

2 HTML

<div class="row"> 
    <div class="form-horizontal col-md-6"> 
     <div class="form-group"> 
      <div class="col-sm-8"> 
       <select class="form-control">...</select> 
      </div> 
      <button class="btn btn-default col-sm-4 custom-margin">New Event</button> 
      <button class="btn btn-primary btn-block">Free Quote</button> 
     </div> 
    </div> 
</div> 

Fiddle 2

或做它正確的方式

3 HTML

<div class="row"> 
    <div class="col-sm-6"> 
      <div class="row"> 
       <div class="col-sm-8"> 
        <div class="form-group"> 
         <select class="form-control">...</select> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <div class="form-group"> 
         <button class="btn btn-default btn-block">New Event</button> 
        </div> 
       </div> 
       <div class="col-sm-12"> 
        <div class="form-group"> 
         <button class="btn btn-primary btn-block">Free Quote</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Fiddle 3