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

Question

我正在使用以下内容在基于引导程序的 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 中查看，你会明白我的意思。有谁知道如何修改它以维护左侧的事件类型和右侧的事件计数，以便跨浏览器兼容？

提前谢谢了。

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