引導按鈕保證金右

即時通訊使用這個網站自舉框架：引導按鈕保證金右

<div id="postsPerPage"> 
    <button type="button" class="btn btn-default sort filter" title="5">5</button> 
    <button type="button" class="btn btn-default sort active filter" title="10">10</button> 
    <button type="button" class="btn btn-default sort filter" title="25">25</button> 
    <button type="button" class="btn btn-default sort filter" title="50">50</button> 
    <button type="button" class="btn btn-default sort filter" title="100">100</button> 
</div>

請參閱此琴：https://jsfiddle.net/boriskamp1991/vppt8qvm/2/

爲什麼會出現按鍵之間有着不可考保證金？我需要這個爲0，因爲我想用百分比寬度單位工作，這將它弄混了......

我真的沒有線索搜索和搜索後。您也可以在他們的文檔頁面找到邊距：http://getbootstrap.com/css/#buttons

謝謝！

來源

2015-04-17 Boris Kamp

的「餘量」是由於<button>元件之間的空格。如果你真的做需要五個單獨的按鈕，而不是一個按鈕組的外觀，如由蒂姆·劉易斯的回答表明，你可以刪除空白：

<div id="postsPerPage"> 
    <button type="button" class="btn btn-default sort filter" title="5">5</button><button type="button" class="btn btn-default sort active filter" title="10">10</button><button type="button" class="btn btn-default sort filter" title="25">25</button><button type="button" class="btn btn-default sort filter" title="50">50</button><button type="button" class="btn btn-default sort filter" title="100">100</button> 
</div>

來源

2015-04-17 18:52:32

謝謝！你是英雄！它是默認的按鈕行爲，當每個按鈕放置在它自己的代碼行上時，自動添加空格而不是全部放在同一行上？ –

我很樂意提供幫助。按鈕是內嵌塊元素，因此它們之間的空格（在本例中爲換行符）就像句子中單詞之間的空格一樣呈現。 [本頁]（https://css-tricks.com/fighting-the-space-between-inline-block-elements/）詳細介紹了多種「對抗」空間的方法。 –

感謝您檢查並解釋雅各布！現在一切都說得通了 –

添加<div class="btn-group">在你...... 按鈕組：

<div id="postsPerPage"> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-default sort filter" title="5">5</button> 
     <button type="button" class="btn btn-default sort active filter" title="10">10</button> 
     <button type="button" class="btn btn-default sort filter" title="25">25</button> 
     <button type="button" class="btn btn-default sort filter" title="50">50</button> 
     <button type="button" class="btn btn-default sort filter" title="100">100</button> 
    </div> 
</div>

這將擺脫他們之間的間距。

JSFiddle

來源

2015-04-17 18:45:57

謝謝，我知道'btn-group'類。由於響應的原因，我不想'btn-group'，我想完全控制我的按鈕，使它們在大幅面上彼此疊放，並在較小的屏幕上跨越50％的寬度等。如果按鈕之間的空白區域爲0. –

大廈關閉蒂姆·劉易斯的回答，你可以選擇添加btn-group類到id =「postsPerPage」的同一個div。看起來像這樣：

<div id="postsPerPage" class="btn-group"> 
    <button type="button" class="btn btn-default sort filter" title="5">5</button> 
    <button type="button" class="btn btn-default sort active filter" title="10">10</button> 
    <button type="button" class="btn btn-default sort filter" title="25">25</button> 
    <button type="button" class="btn btn-default sort filter" title="50">50</button> 
    <button type="button" class="btn btn-default sort filter" title="100">100</button> 
</div>

來源

2015-04-17 18:56:27

引導按鈕保證金右

回答

相關問題