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>

它们之间有一个小空间。它来自哪里以及如何在不使用浮动的情况下将其移除？根据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>

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>

Bootstrap 3按钮之间的空间

2 个答案: