带有右对齐字形图标的引导下拉菜单宽度答案

【问题标题】：Bootstrap dropdown menu width with right-aligned glyphicons带有右对齐字形图标的引导下拉菜单宽度
【发布时间】：2016-07-15 12:34:54
【问题描述】：

我有一个来自导航栏的下拉菜单，它有右对齐（css 类拉右）字形图标。其中一个菜单项比其他菜单项长一点，它会碰到字形图标，导致它向下移动半行：

显然，我可以使用 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）。

【问题讨论】：

您是否尝试过通过 CSS 将 .dropdown 的宽度设置为 100%？
当我在bootply.com 上复制您的代码时，我似乎无法重现该问题，菜单会扩展以适应列表项文本的长度。在我看来，您对该菜单应用了某种宽度限制，并且将宽度设置为 auto 应该可以解决此问题。
@UncaughtTypeError：我在问题正文中添加了导航栏的整个 HTML。我还输入了一些 CSS 和版本号。希望对您的诊断有所帮助。我看不到任何应该设置菜单宽度的 CSS，并且 chrome 的检查器为菜单的 LI 和包含的 UL 显示自动。导航栏中包含 LI 的宽度确实较小，但那是菜单标题。
@siride 谢谢！这有很大帮助。如果您可以移动元素并将链接文本包装在标签中，我相信以下示例对您有用：bootply.com/wMD9IaHs4R 或者，您也可以尝试将图标添加为链接标签的伪元素本身，然后定位它们 absolute 并使用 top、right 等相应地设置它们
@UncaughtTypeError：回答这个问题，你会得到一些因果报应。

标签： html css twitter-bootstrap

【解决方案1】：

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

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 值。

【讨论】：

成功了！不过，我可能会稍微调整右边距以获得更多空间。

【解决方案2】：

我使用了这个 CSS 而不是 .pull-right 类：

@media (min-width: 768px) {
  .navbar-right .dropdown-menu > li > a {
    padding-right: 46px;
    position: relative;
  }
  .navbar-right .dropdown-menu > li > a > .glyphicon {
    display: block;
    position: absolute;
    right: 20px;
    top: 5px;
  }
}

请检查结果。是你想要达到的吗？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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;
}

@media (min-width: 768px) {
  .navbar-right .dropdown-menu > li > a {
    padding-right: 46px;
    position: relative;
  }
  .navbar-right .dropdown-menu > li > a > .glyphicon {
    display: block;
    position: absolute;
    right: 20px;
    top: 5px;
  }
}

<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"><span class="glyphicon glyphicon-wrench"></span>Settings</a></li>
                    <li><a href="/Account/Account/ChangePassword"><span class="glyphicon glyphicon-lock"></span>Change Password</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="/Account/Login/Logout"><span class="glyphicon glyphicon-log-out"></span>Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

【解决方案3】：

最简单的解决办法是对文本进行换行

Change<br>Password

这会使所有元素和菜单在水平方向上保持相同的大小。第二个简单的解决方案是改变宽度

.glyphicon {
  padding-left: 10px;    
}

【讨论】：

第一个更改是不可取的，第二个没有区别。