链接按钮和Bootstrap glyphicons样式问题

Question

我有这个问题，当我在下拉菜单中使用LinkBut​​ton时，图标和LinkBut​​ton文本会分开显示。

HTML

<ul class="nav navbar-nav navbar-right">
  <li>
    <a data-toggle="dropdown" class="dropdown-toggle text-white" href="#">Hi,
      <asp:Label ID="lbllname" runat="server" Text=""></asp:Label>
      <b class="caret"></b>
    </a>
    <ul style="margin: 25px 15px 0 0;" role="menu" class="dropdown-setting dropdown-menu bg-amber">
      <li>
        <a href="#">
          <span class="entypo-user"></span>&nbsp;&nbsp;My Profile</a>
      </li>
      <li>
        <a href="#">
          <span class="entypo-vcard"></span>&nbsp;&nbsp;Account Setting</a>
      </li>
      <li>
        <a href="#">
          <span class="entypo-lifebuoy"></span>&nbsp;&nbsp;Help</a>
      </li>
      <li>
        <a href="#">
          <span class="icon-upload"></span>&nbsp;&nbsp;
          <asp:LinkButton ID="btnlogout" OnClick="btnlogout_Click" runat="server">Log out</asp:LinkButton></a>
      </li>
    </ul>
  </li>
</ul>

在浏览器中呈现的链接按钮，如下所示

<li>
<a href="#">
<span class="icon-upload"></span>&nbsp;&nbsp;
</a><a id="btnlogout" href="javascript:__doPostBack('ctl00$btnlogout','')">Log out</a>
</li>

Answer 1

只需将其作为CSS修复：

.navbar-right li {white-space: nowrap;}

这是由于您 的使用不当造成的，可以通过强制浏览器使用nowrap将文字渲染到一行来修复。

另一个问题是您有一个嵌套<a> 标记。这不应该发生。请以这种方式更改标记：

<asp:LinkButton ID="btnlogout" OnClick="btnlogout_Click" runat="server">
    <span class="icon-upload"></span> Log out
</asp:LinkButton>