Twitter bootstrap twitter引导下拉菜单的动态宽度?
我正在为我的ASP.Net网站设计一个新的布局,我正在利用twitter的引导功能,但无法让下拉菜单100%正常工作。我有一个标签为“媒体”的菜单,当你点击子菜单时,它会像应该的那样弹出,但子菜单的宽度不会动态扩展,以适应一行中的所有文本。你可以去看看我在说什么。如果查看“介质”下拉列表,最后一个菜单选项应位于一行,但由于菜单未动态调整其宽度,最后一个菜单项被强制设置为三行。如何使子菜单动态调整其宽度,使其能够在一行中适应第三个选项?下面是我用来生成该菜单的代码:Twitter bootstrap twitter引导下拉菜单的动态宽度?,twitter-bootstrap,asp.net-4.5,Twitter Bootstrap,Asp.net 4.5,我正在为我的ASP.Net网站设计一个新的布局,我正在利用twitter的引导功能,但无法让下拉菜单100%正常工作。我有一个标签为“媒体”的菜单,当你点击子菜单时,它会像应该的那样弹出,但子菜单的宽度不会动态扩展,以适应一行中的所有文本。你可以去看看我在说什么。如果查看“介质”下拉列表,最后一个菜单选项应位于一行,但由于菜单未动态调整其宽度,最后一个菜单项被强制设置为三行。如何使子菜单动态调整其宽度,使其能够在一行中适应第三个选项?下面是我用来生成该菜单的代码: <div class="
<div class="column-main">
<div class="row-fluid">
<div class="navbar main-nav">
<div class="navbar-inner">
<ul class="nav">
<li>
<a href="http://www.ffinfo.com/">
<i class="icon-home"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<asp:Literal ID="lblSiteTitle" Text="<%$Resources:Navigation, Site%>" runat="server" />
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Temp
</li>
</ul>
</li>
<li class="divider-vertical" />
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<asp:Literal ID="lblMediaTitle" Text="<%$Resources:Navigation, Media%>" runat="server" />
</a>
<b class="ceret"></b>
<ul class="dropdown-menu">
<li class="nav-header text-center">
<asp:Literal ID="lblFanTitle" Text="<%$Resources:Navigation, Fan%>" runat="server" />
</li>
<li class="nav-header text-center">
<asp:Literal ID="lblMediaSubTitle" Text="<%$Resources:Navigation, MediaSub%>" runat="server" />
</li>
<li class="nav-header text-center">
<asp:Literal ID="lblTest" Text="<%$Resources:Navigation, Chronicles%>" runat="server" />
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
-
-
-
临时雇员
-
-
-
-
-
将链接添加到锚定
标记中,下拉菜单框将调整其宽度。像这样:
<li class="nav-header text-center">
<a href="#">Final Fantasy Crystal Chronicles Series</a>
</li>
下面的答案可能对您的具体情况有所帮助。尝试只添加锚定标记使标题成为我的链接(在悬停事件中),并使标题具有不同的样式(以某种方式居中、字体、大小等)。为了满足我的特殊需要,我进入bootstrap.css并修改了nav标题以包含空白:nowrap;它表现得很正常,只是不去下一行。
.dropdown-menu > li > a {
...
white-space: nowrap;
...
}