我将这个html与bootstrap Framework一起使用:
<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
谢谢!
答案 0 :(得分:4)
在... 按钮组
附近添加<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>
这将消除它们之间的间距。
答案 1 :(得分:0)
“边距”是由<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>
答案 2 :(得分:0)
根据Tim Lewis的回答,你可以选择将btn-group类添加到id =&#34; postsPerPage&#34;的同一个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>