Question

我在IE8，Chrome和Firefox中有一个小提琴，但在IE9中却失败了。

我正在使用bootstrap 2.3.2，我希望徽章与文本在同一行，但在右边。这适用于IE9的每个浏览器。在IE9中，徽章显示在文本下方。

<div class='tabs-left'>
  <ul class='nav nav-tabs'>
    <li>
      <a href="#specializations_tab" data-toggle="tab">
        Specializations
        <span id="specializations-count" class="badge badge-info section-count pull-right">
          0
        </span>
      </a>
    </li>
    <!-- lots more like above -->
  </ul>
</div>

Answer 1

您应该通过用户bootstrap colums布局或通过设置固定宽度来指定nav-tabs的宽度。作为测试，只需将nav =“width：180px”添加到nav-tabs，一切都很好。

请参阅包含以下CSS的更新Fiddle：

.nav-tabs {
    width:180px;
}

Answer 2

我可以通过简单地删除右拉类来解决这个问题。

Bootstrap为nav-tabs设计了徽章样式。拉右课不是必需的。

Answer 3

在span元素中，只需删除右拉类，然后将标题文本移到span标记的左侧。在CSS中，对于徽章类来说，使空白区域变得重要。将ul显示为表格并固定表格布局。

在list元素中使用样式display:table-cell

尝试以下示例：

/*In Css*/
.badge {
  display: inline-block;
  white-space: nowrap !important;
}

并在您的HTML中

 <ul class="nav nav-tabs" style="vertical-align: top; width: 100%; display: table;table-layout: fixed;">

    <li class="active" style="display: table-cell">
        <a href="#Inbound" data-toggle="tab" `enter code here`style="text-decoration: none">Messages<span class="badge" runat="server" id="MsgCount">0</span>
       </a>
    </li>
</ul>

在水平标签中右侧使用徽章拉伸（仅限IE9）

3 个答案: