Twitter bootstrap 3 “制作引导程序”；下拉列表“；展开到按钮的一侧

我正在使用Bootstrap（3.2.0）构建一个站点，我的页面上有一个按钮，我想触发一个“下拉”菜单样式的效果，但是我不想让菜单从按钮向下展开，而是希望它滑出右侧。“下拉”菜单项仍将像普通菜单一样垂直堆叠，但菜单的左上角将连接到按钮的右上角，而不是将菜单的顶部连接到按钮的底部。

听起来像是一个很棒的主意，我在网上找到了一个并排导航的例子

。下拉菜单。多列{
宽度：400px；
}
.下拉菜单.多列.下拉菜单{
显示：块！重要；
位置：静态！重要；
边距：0！重要；
边界：没有！重要；
盒影：无！重要；
}

因为

.dropdown menu

已经使用了绝对定位，创建了一个类似

的修改器类。dropdown menu right

并将其样式设置为

。dropdown-menu.dropdown-menu-right{left:100%；top:0；}

可能是一个开始。

.dropdown-menu.multi-column {
    width: 400px;
}

.dropdown-menu.multi-column .dropdown-menu {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

<ul class="nav">
    <li class="dropdown"> <a class="" href="#" data-toggle="dropdown">Dropdown Heading</a>

        <div class="dropdown-menu multi-column">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span6">
                        <ul class="dropdown-menu">
                            <li><a class="" href="#">Col 1 - Opt 1</a>

                            </li>
                            <li><a class="" href="#">Col 1 - Opt 2</a>

                            </li>
                        </ul>
                    </div>
                    <div class="span6">
                        <ul class="dropdown-menu">
                            <li><a class="" href="#">Col 2 - Opt 1</a>

                            </li>
                            <li><a class="" href="#">Col 2 - Opt 2</a>

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