Space 在 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>

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

Answer 1

按钮之间的换行实际上导致 space。观察：

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

Answer 2

我相信您设计了按钮 display:inline-block; 或 inline。默认情况下，如果您有换行符，它们会创建空格。

所以要删除它，请将这些标记并排放置，不要换行符。它会变得凌乱，但没有风格也能得到你想要的 float

所以这样做:

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

Space 在 Bootstrap 3 个按钮之间

Space between Bootstrap 3 buttons

css

twitter-bootstrap-3