引导按钮保证金右

即时通讯使用这个网站自举框架：引导按钮保证金右

<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

引导按钮保证金右

回答

相关问题