Bootstrap 导航子菜单 - 多列右对齐

Question

我在Bootstrap中创建了一个多列子菜单，该子菜单与顶级菜单左对齐，但我需要使其与顶级菜单右对齐。

我试过使用绝对定位，但没有成功。请查看 http://www.bootply.com/P3fltOTDRF

处的代码

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!--/.navbar-header-->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item  <b class="caret"></b></a>
            </li> 

            ...
            ...      

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
                <ul class="dropdown-menu multi-column columns-2">
                    <div class="row">
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </ul>
            </li>
        </ul>
    </div>
    <!--/.navbar-collapse-->
</nav>
<!--/.navbar-->



.dropdown-menu.columns-2 {
    min-width: 400px;
}

Answer 1

只给导航栏pull-right？

<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">

预览

Fiddle: http://www.bootply.com/Eot2HWSUjT

Answer 2

如何将 class pull-right 添加到带有 class dropdown-menu 的 ul

<ul class="dropdown-menu multi-column columns-2 pull-right">

DEMO

Bootstrap 导航子菜单 - 多列右对齐

Bootstrap nav submenu - multi column right alignment

css

twitter-bootstrap

drop-down-menu

nav