引导大下拉菜单卡在左边

Question

我在使用引导程序的菜单时遇到问题。小下拉菜单可以正常打开并对齐，但大下拉菜单始终向左对齐，即使菜单标题位于屏幕的最右侧

我希望发生以下情况之一

1 - 在标题下方的中间打开

2 - 如果在最左边，则向右打开

3 - 如果在最右边，则向左打开

我已经解决了这个问题 https://jsfiddle.net/fu847jnw/2/

我怎样才能达到上述目的

<div class="navbar-cont">
<div class="container">
    <div class="row">
        <div class="span12">


            <div class="navbar navbar-default " role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse navbar-menubuilder">
                        <ul class="nav navbar-nav navbar-left">
                            <li><a href="/">Home</a>
                            </li>
                            <li><a href="/products">Products</a>
                            </li>
                            <li><a href="/about-us">About Us</a>
                            </li>
                            <li><a href="/contact">Contact Us</a>
                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">About Us</a>
                                    </li>
                                    <li><a href="#">Contact Us</a>
                                    </li>
                                    <li><a href="#">My Account</a>
                                    </li>
                                    <li><a href="#">Wish List</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Large Dropdown <b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </li>


                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">This Is Really Large Title <b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </li>

                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Just Another Menu Type<b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">About Us</a>
                                    </li>
                                    <li><a href="#">Contact Us</a>
                                    </li>
                                    <li><a href="#">My Account</a>
                                    </li>
                                    <li><a href="#">Wish List</a>
                                    </li>
                                </ul>
                            </li>


                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>

                                </ul>

                            </li>


                        </ul>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

Answer 1

这是一个使用您的代码的示例。在 HTML 中，我向您的最后一个菜单项添加了一个类 tmenu-menu，如下所示：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">

然后在 CSS 中添加这段代码

@media (min-width: 1200px) {
  .tmenu-menu {
    right: 0;
    left: inherit;
  }
}

现在，当您查看您的网站并且浏览器的宽度为1200px 或更大时，您将看到位于屏幕右侧的大菜单。然后，当您在1200px 下方缩小菜单一次时，菜单将回到左侧。一个 SO 答案 provides the various break points sizes 但这些也可以在 bootstrap website 上找到。

您必须添加自己的自定义类，并根据每个宽度尺寸所需的位置定位菜单。我有updated your js.fiddle with my example code（我还保留了 BS 使用的不同媒体尺寸）。此代码不完整，但应该可以帮助您找到正确的方向。希望对您有所帮助。