如何使用Bootstrap 3.0显示父菜单右侧的子菜单？

Question

在Razor View中，想要在parent项目的右侧显示子菜单，但目前它显示在parent项目下！我已应用了不同的bootstrap classes但它没有任何区别！

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a >Menues</a></li>
    @{
        if (Model.MenuRights != null)
        {
            foreach (MenuRight header in Model.MenuHeaders.ToList())
            {
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Main Item </a><hr />
                   <ul class="dropdown-menu" role="menu" >
                        <li><a>Inner item 1</a></li> 
                        <li><a>Inner item 2</a></li> 
                        <li><a>Inner item 3</a></li> 
                    </ul>
                </li>

            }
        }

}

Answer 1

喜欢这个吗？

创建类：

.rightMenu {
    top: 0;
    left: auto;
    right: 0;
}

标记变为：

<ul class="dropdown-menu  rightMenu" role="menu">
    <hr />
    <li><a>Inner item 1</a>
    </li>
    <li><a>Inner item 2</a>
    </li>
    <li><a>Inner item 3</a>
    </li>
</ul>

示例here。