Bootstrap Nav-List 对齐/浏览器兼容性答案

【问题标题】：Bootstrap Nav-List alignment / browser compatibilityBootstrap Nav-List 对齐/浏览器兼容性
【发布时间】：2012-10-13 03:40:48
【问题描述】：

我正在使用以下内容在基于引导程序的 Rails 应用程序中创建导航列表：

<ul class="nav nav-list">
  <li class="nav-header">Going out</li>
    <% @event_types.each do |et| %>
      <li>
       <a href="/events?event_type=<%= et.id %>">
       <div class="span2"><%= et.event_type %></div>
       <div><span class="badge badge-success"><%= et.events.future_events_count %></span></div></a>
      </li>
   <% end %>
</ul>

我认为这看起来不错，直到有人指出它在 Internet Explorer 中未对齐！！

我的网站在这里：www.wozzoncornwall.co.uk，例如，如果您在 Chrome 中查看，它看起来不错。在 IE 中查看，你会明白我的意思。有谁知道如何修改它以维护左侧的事件类型和右侧的事件计数，以便跨浏览器兼容？

非常感谢。

【问题讨论】：

在 IE9 和 chrome 中对我来说看起来一样！！这是不是低版本IE的问题？
事件类型和计数是否水平对齐？我只在模拟器 (netrenderer.com) 中尝试过它，它在所有 IE 版本上看起来都很糟糕。我的伙伴我们在他的 PC 上使用 IE9，但它对他来说是错位的！？！认为我应该重新编码，至少直到我可以让它在模拟器中按预期呈现。

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

【解决方案1】：

好的，这是我自己想出来的。以下是遇到相同问题的其他人的方法。

基本上，我将两个 div 放在 li 标签内，然后使用引导程序 pull-right 辅助类：

<% @event_types.each do |et| %>
    <li>
      <a href="/events?event_type=<%= et.id %>">
        <%= et.event_type %>
            <span class="badge badge-success pull-right"><%= et.events.future_events_count %></span>
        </a>
    </li>
<% end %>

【讨论】：