Question

我将这个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

谢谢！

Answer 1

在... 按钮组

附近添加<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

Answer 2

“边距”是由<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>

Answer 3

根据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>

右边的Bootstrap按钮

3 个答案: