twitter-bootstrap - Twitter Bootstrap 下拉菜单的动态宽度？

Question

我正在为我的 ASP.Net 站点设计一个新布局，并且正在利用 Twitter Bootstrap ，但无法使下拉菜单 100% 正常工作。我有一个标有“媒体”的菜单，当您单击子菜单时会像它应该的那样弹出，但子菜单的宽度不会动态扩展它的宽度以适应 1 行中的所有文本。你可以去http://ffinfo.azurewebsites.net/webform1.aspx看看我在说什么.如果您查看 Media drop out，最后的菜单选项应该在一行上，但是由于菜单没有动态调整它的宽度，所以最后一个菜单项被强制为 3 行。我怎样才能让子菜单动态调整它的宽度，以便它可以在一行中适应第三个选项？这是我用来生成该菜单的代码:

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

Answer 1

在 anchor 内添加链接 <a>标签和下拉菜单框将调整其宽度。像这样:

<li class="nav-header text-center">
    <a href="#">Final Fantasy Crystal Chronicles Series</a>
</li>

它来自 bootstrap.css 中的这个 css:

.dropdown-menu > li > a {
...
    white-space: nowrap;
...
}