html - 链接按钮和 Bootstrap 字形样式问题

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>