twitter bootstrap 渲染问题（文档中的按钮样式与本地使用不同）答案

【问题标题】：twitter bootstrap rendering issue (button styling in the docs differ from local use)twitter bootstrap 渲染问题（文档中的按钮样式与本地使用不同）
【发布时间】：2012-03-09 04:38:30
【问题描述】：

我在一个项目中使用 twitter bootstrap，在查看文档时，我遇到了一个非常奇怪的问题 - 如果可以这样调用的话。

在http://twitter.github.com/bootstrap/base-css.html#buttons 上，有很多按钮并排显示。它们似乎有间距，但计算的样式（在我研究的 Firefox 和 Safari 中）如下：

margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0

这不应呈现为单个按钮之间 10~px 的间距。

9/14px 的填充似乎只用于显示按钮形状。

现在，当我在自己的项目中使用 twitter bootstrap 时，我从 twitter bootstrap 文档站点看到的边距似乎无法在本地工作 - 按钮彼此粘在一起，没有间距。这可以通过一个简单的本地margin 来纠正，但我想知道为什么它与文档不同。另外：为什么它不显示在 firebug 或其他开发者工具中？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

所有按钮都添加了display:inline-block 属性，display:inline-block 取决于从其容器继承的字体大小。如果您将 p 标签上的 font-size 设置为包含按钮的 0 或删除 html, body 和 p 标签 font-size，您可以看到该空间是如何删除的。

【讨论】：

我仍然无法在我的本地引导开发副本上重新创建它。非常感谢你的解释。看起来向容器添加字体大小不会为按钮添加间距，我做得还不够吗？
您必须使用包含您的按钮的font-size 属性定位所有元素。例如，在引导演示中，html、body 和 p 标记都添加了 font-size 属性，因此您必须将它们设置为 0 来测试它，或者您可以简单地设置font-size:0 到按钮的容器，font-size 到元素本身，例如.container { font-size:0; } .child-element { font-size:16px }.
感谢您的帮助，在检查您的思路时，我遇到了实际问题 - a-标签之间没有空格。我没有将它们视为文本内容，您使用字体大小的方法将我带到了那里。

【解决方案2】：

解决方案相当简单：周围的<td>s 的样式为padding: 8px 加上单像素边框。移除那些会完全移除感知到的边距。

【讨论】：

这解释了表格，但是下面水平对齐的按钮呢？