2

ASP.Netサイトの新しいレイアウトに取り組んでおり、Twitterブートストラップを利用していますが、ドロップダウンメニューを100％機能させることができません。「メディア」というラベルの付いたメニューがあり、サブメニューをクリックすると、本来のようにポップアップしますが、サブメニューの幅が動的に拡大せず、すべてのテキストが1行に収まります。http://ffinfo.azurewebsites.net/webform1.aspxにアクセスすると、私が話していることを確認できます。メディアドロップアウトを見ると、最後のメニューオプションは1行になっているはずですが、メニューは動的に幅を調整していないため、最後のメニュー項目は3行に強制されます。サブメニューの幅を動的に調整して、3番目のオプションをすべて1行に収めることができるようにするにはどうすればよいですか？そのメニューを生成するために使用しているコードは次のとおりです。

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

1 に答える 1

7

アンカー<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;
...
}
于 2013-02-24T20:20:50.910 に答える