css - Bootstrap 3 按钮之间的空间

Question

如果我连续放置几个 Bootstrap 3 按钮:

    <button class="btn btn-default">Button 1</button>
    <button class="btn btn-default">Button 2</button>
    <button class="btn btn-default">Button 3</button>

他们之间有一个小空间。它来自哪里以及如何在不使用 float 的情况下将其删除？根据 Firebug 和 Chrome Inspector，按钮没有应用任何边距。

Answer 1

按钮之间的换行符实际上导致了空格。观察:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>

如果您希望按钮在视觉上分组，您可以使用按钮组规则:http://getbootstrap.com/components/#btn-groups

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>