Question

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

Answer 1

听起来好像是一个并排导航的例子，我在网上找到了。 http://www.bootply.com/uBVgiR9DDd

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

制作bootstrap＆＃34;下拉＆＃34;扩展到按钮的一侧

1 个答案: