Question

我有一个来自导航栏的下拉菜单，它有右对齐（css类右拉）字形。其中一个菜单项比其他菜单项长一些，它会进入glyphicon，导致它向下移动一半：

我显然可以使用CSS类和硬编码宽度手动设置此下拉列表的宽度，但我宁愿让Bootstrap适当地合并glyphicon宽度。我如何构建我的HTML或我需要做些什么更改才能使其工作？

这是整个导航栏的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通过jget.UI.Combined在Nuget中）和bootstrap.css（版本3.3.6.1通过Nuget）。

Answer 1

我使用过这个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>

Answer 2

重新排列标记以将图标放置在锚文本之前（这将绕过＆＃34;降压＆＃34;效果），然后将锚文本包装在另一个嵌套标记中，您可以将其定位以应用进一步的样式帮助解决手头的问题。

<强> HTML

<VirtualHost *:80>
Define domain example.com
Define path /var/www/${domain}/myproj
Define project myproj


ServerName ${domain}
ServerAlias www.${domain}

DocumentRoot ${path}

WSGIDaemonProcess ${domain} python-path=${path}

WSGIScriptAlias / ${path}/${project}/wsgi.py \
    process-group=${domain} application-group=%{GLOBAL}

<Directory ${path}/${project}>
    <Files wsgi.py>
        Require all granted
    </Files>
</Directory>


Alias /media/ ${path}/media/
Alias /static/ ${path}/static/
Alias /robots.txt ${path}/static/robots.txt
Alias /favicon.ico ${path}/static/favicon.ico

<Location "/media/">
    Options -Indexes
</Location>

<Location "/static/">
    Options -Indexes
</Location>

ErrorLog /var/log/apache2/${domain}-error.log
LogLevel warn
CustomLog /var/log/apache2/${domain}-access.log combined

</VirtualHost>

<强> CSS

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

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

或者，您也可以尝试将图标添加为链接标记本身的伪元素，然后将它们放置.dropdown-link-text { display: inline-block; margin-right: 20px; }并相应地调整absolute，top值。

Answer 3

最简单的解决方案是将文本换行

Change<br>Password

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

.glyphicon {
  padding-left: 10px;    
}

具有右对齐glyphicons的Bootstrap下拉菜单宽度

3 个答案: