twitter bootstrap btn-navbar 只显示一行答案

【问题标题】：twitter bootstrap btn-navbar only shows one linetwitter bootstrap btn-navbar 只显示一行
【发布时间】：2012-06-10 01:03:01
【问题描述】：

我有以下导航栏折叠：

<button type="button" class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'>
        <span class="icon-bar"/>
        <span class="icon-bar"/>
        <span class="icon-bar"/>
</button>

但是，我在实际栏上只看到一行。有什么办法可以解决这个问题吗？

【问题讨论】：

尝试a 元素而不是button - 就像<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 我不知道这是否是问题所在，您是否更改了默认引导文件的颜色？你没有向我们展示一个活生生的例子或你的任何 CSS
试过了。没有区别。
就目前而言，您确实需要提供一个实时示例 (jsfiddle.net) 或向我们展示该元素用于回答此问题的 CSS 代码。

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

试试：

<button type="button" class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

span 标签不是单个标签。如果没有正确关闭，浏览器会将其解释为：

<span class="icon-bar">
  <span class="icon-bar">
    <span class="icon-bar"></span>
  </span>
</span>

这就是为什么你只得到一个酒吧。

【讨论】：

你做了什么不同的事情？除了调整缩进之外，您的标记与问题中的相同。我忽略了什么吗？
多么奇怪......我搞砸了，我已经更新了我的答案。我一定是从我的编辑器中复制/粘贴了错误的行。无论如何，诀窍在于标签不是单个标签，它们需要一个单独的结束标签，因为它们旨在包装内容。