將多個按鈕添加到引導程序搜索表格

Question

使用引導程序，將多個按鈕附加到.form-search可以將兩個附加按鈕的右角四捨五入。

HTML：

<form class="form-search"> 
    <div class="input-append"> 
    <input type="text" class="span2 search-query"> 
    <button type="submit" class="btn">Quick</button> 
    <button type="submit" class="btn">Full</button> 
    </div> 
</form> 

見http://jsfiddle.net/jhfrench/aFYcM/3/

我怎樣才能調整CSS，以便只有最後一個按鈕獲取圓角和中間鍵是「方」？

---

只爲背景，我可以追加多個按鈕的輸入，只有最右邊的按鈕，得到圓角：

<div class="alert alert-success"> 
    Regular input can append two buttons such that the middle button ("Quick") does not have rounded corners:<br /> 
    <form> 
     <div class="input-append"> 
      <input type="text" class="span2"> 
      <button type="submit" class="btn">Quick</button> 
      <a href="somewhere.html" class="btn">Full</a> 
     </div> 
    </form> 
</div> 

見http://jsfiddle.net/jhfrench/aFYcM/4/

Answer 1

我創建了一個corresponding issue with Bootstrap，但它已關閉（「我們不支持這一點，並可能會刪除在3.0中執行多個按鈕的功能。」-mdo）。所以我製作了我自己的CSS來解決這個問題（請參閱http://jsfiddle.net/jhfrench/aFYcM/34/）。

關鍵是將.form-search .input-append .fixed-btn *樣式中的邊界半徑聲明重新定義爲（0），對於.prepend也是這樣做的。然後使用:last-child選擇器聲明正確的邊界半徑規格。

.form-search .input-append .fixed-btn, .form-search .input-prepend .fixed-btn { 
    margin-left: -1px; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
} 

.form-search .input-append .btn:last-child { 
    -webkit-border-radius: 0 14px 14px 0; 
    -moz-border-radius: 0 14px 14px 0; 
    border-radius: 0 14px 14px 0; 
} 

* - 請注意，我創建.fixed-btn的小提琴，因爲我包括從CDN的引導資產（我不能編輯CDN與我的變更CSS）。對於那些傾向於，你可以添加這些行到你的style.less文件，以得到更正到CSS：

.navbar-search .input-prepend .btn, .navbar-search .input-append .btn { 
    margin-left: -1px; 
    .border-radius(0 0 0 0); 
} 
.navbar-search .input-append .search-query { 
    .border-radius(14px 0 0 14px); 
} 
.navbar-search .input-append .btn:last-child { 
    .border-radius(0 14px 14px 0); 
}