html - 带右对齐字形的 Bootstrap 下拉菜单宽度

Question

我有一个来自导航栏的下拉菜单，它有右对齐(css class pull-right)字形。其中一个菜单项比其他菜单项长一点，它碰到了字形图标，导致它向下移动了半行:

我显然可以使用 CSS 类和硬编码宽度手动设置此下拉菜单的宽度，但我宁愿让 Bootstrap 适本地合并字形图标宽度。我需要如何构建我的 HTML 或我需要对 CSS 进行哪些更改才能使其正常工作？

这是整个导航栏的 HTML:

<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
            <span>
                <img id="XXX-brand-logo" alt="Brand" src="/Content/Images/XXX.png" width="20" height="20"></span>
            Home
        </a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a href="/XXX">XXX</a>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">XXX<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/XXX">XXX</a></li>
                    <li><a href="/XXX">XXX</a></li>
                </ul>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">XXX<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/XXX/XXX">XXX</a></li>
                    <li><a href="/XXX/XXX">XXX</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/Admin/Role/ManageRoles">Manage Roles</a></li>
                    <li><a href="/Admin/Group/ManageGroups">Manage Groups</a></li>
                    <li><a href="/Admin/User/ManageUsers">Manage Users</a></li>
                </ul>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> Administrator<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/Account/Account/Settings">Settings <span class="glyphicon glyphicon-wrench pull-right"></span></a></li>
                    <li><a href="/Account/Account/ChangePassword">Change Password <span class="glyphicon glyphicon-lock pull-right"></span></a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="/Account/Login/Logout">Logout <span class="glyphicon glyphicon-log-out pull-right"></span></a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

这里是可以修改此页面的任何 CSS:

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.glyphicon-hover {
    border-radius: 25px;
    border: 1px solid transparent;
    padding: 2px;
}

.glyphicon-hover:hover, .glyphicon:focus {
    border-radius: 5px;
    border: 1px solid black;
    color: red;
}

我正在使用 jquery-ui.css(1.11.4 版，通过 jQuery.UI.Combined in Nuget)和 bootstrap.css(3.3.6.1 版，通过 Nuget)。

Answer 1

重新排列您的标记以将图标放在 anchor 文本之前(这将规避“降压”效果)，然后将 anchor 文本包装在另一个嵌套标签中，您可以将其定位以应用进一步的样式将有助于解决问题就在眼前。

HTML

<ul class="dropdown-menu ">
  <li><a href="/Account/Account/Settings "><span class="glyphicon glyphicon-wrench pull-right "></span><span class="dropdown-link-text ">Settings</span></a>
  </li>
  <li><a href="/Account/Account/ChangePassword "><span class="glyphicon glyphicon-lock pull-right "></span><span class="dropdown-link-text ">Change Password</span></a>
  </li>
  <li role="separator " class="divider "></li>
  <li><a href="/Account/Login/Logout "><span class="glyphicon glyphicon-log-out pull-right "></span><span class="dropdown-link-text ">Logout</span></a>
  </li>
</ul>

CSS

.dropdown-link-text {
    display: inline-block;
    margin-right: 20px;
}

工作示例:http://www.bootply.com/wMD9IaHs4R

或者，您也可以尝试将图标添加为链接标记本身的伪元素，然后将它们放置在 absolute 位置并调整 top、right 相应的值。