Bootstrap 3按钮之间的空间 [英] Space between Bootstrap 3 buttons

问题描述

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

 < button class = btn btn-default> ;按钮1< / button> 
< button class = btn btn-default>按钮2< / button> 
< button class = btn btn-default>按钮3< / button> 
  

它们之间有很小的空间。它来自哪里，如何在不使用float的情况下将其删除？根据Firebug和Chrome Inspector的说法，按钮没有任何保证金。

解决方案

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

< pre class = snippet-code-html lang-html prettyprint-override> < link href = // maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css rel = stylesheet />< button class = btn btn-default>按钮1< / button>< button class = btn btn-default>按钮2< / button><按钮class = btn btn-default>按钮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-gr oup role = group aria-label = ...> < button type = button class = btn btn-default>左< / button> < button type = button class = btn btn-default>中< / button> < button type = button class = btn btn-default>右< / button>< / div>  

If I put several Bootstrap 3 buttons in a row:

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

there is a small space between them. Where does it come from and how to remove it without using float? According to the Firebug and Chrome Inspector the buttons haven't any margin applied to them.

解决方案

The newline between the buttons actually causes the space. Observe:

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

There is a button-group rule you can use if you want the buttons visually grouped: 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>

这篇关于Bootstrap 3按钮之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！