2
Navbarからドロップダウンメニューがあり、右揃え（css class pull-right）グリフコンがあります。メニュー項目の一つが他のものより少し長く、それがハーフライン下に移動させる、glyphiconに実行されます：私は明らかにして手動でこのドロップダウンの幅を設定することができ右揃えのグリフコンを使用したブートストラップドロップダウンメニューの幅
をCSSクラスとハードコーディングされた幅がありますが、私はむしろ、グリフコン幅を適切に組み込むためにブートストラップを取得したいと思います。どのように私の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です：私はjqueryの-ui.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;
}
（バージョン1.11。 4経由でNugetのjQuery.UI.Combined）とbootstrap.css（バージョン3.3.6.1、Nuget経由）。
'' '.dropdown'''の幅をCSS経由で100％のように設定しようとしましたか？ – jonmrich
http://www.bootply.comでコードを複製すると問題が再現されないようですが、リスト項目のテキストの長さに合わせてメニューが展開されます。しかし、あなたはそのメニューに適用されるある種の幅制限があり、幅を 'auto'に設定するとこれを解決するはずです。 – UncaughtTypeError
@UncaughtTypeError：質問本体にナビゲーションバー用のHTML全体を追加しました。私はまたいくつかのCSSとバージョン番号を入れました。それがあなたの診断に役立つことを願っています。私はメニューの幅を設定する必要のあるCSSを見ることができず、クロムのインスペクタはメニューのLIと含まれているULに対して自動的に表示されます。ナビゲーションバーのLIには幅が小さくなりますが、これはメニューのヘッダーです。 – siride