Question

我正在努力建立一个定制的＆＃34;大型菜单＆＃34;使用Bootstrap。我的一些子菜单UL将有多列，因此我想利用Bootstrap框架来定义列布局。现在，我知道使用div作为UL的孩子是无效的标记，但有什么方法可以解决这个问题吗？

以下是我想要的结构示例：

<div class="menu-container">
    <ul id="navbar">
        <li><a href="#">Top Menu Link</a>
            <ul>
                <div class="row">
                    <div class="col-sm-3">
                        <li><a href="#">Child Links</a>
                            <ul>
                                <li><a href="#">Child 1</a></li>
                                <li><a href="#">Child 2</a></li>
                                <li><a href="#">Child 3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Child Links 2</a>
                            <ul>
                                <li><a href="#">Child 1</a></li>
                                <li><a href="#">Child 2</a></li>
                                <li><a href="#">Child 3</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="col-sm-3">
                        <li><a href="#">Child Links 3</a>
                            <ul>
                                <li><a href="#">Child 1</a></li>
                                <li><a href="#">Child 2</a></li>
                                <li><a href="#">Child 3</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="col-sm-3">
                        <li><a href="#">Child Links 4</a>
                            <ul>
                                <li><a href="#">Child 1</a></li>
                                <li><a href="#">Child 2</a></li>
                                <li><a href="#">Child 3</a></li>
                            </ul>
                        </li>
                    </div>
                    <div class="col-sm-3">
                        <li><a href="#">Child Links 5</a>
                            <ul>
                                <li><a href="#">Child 1</a></li>
                                <li><a href="#">Child 2</a></li>
                                <li><a href="#">Child 3</a></li>
                            </ul>
                        </li>
                    </div>
                </div>
            </ul>
        </li>
    </ul>
</div>

Answer 1

尝试退出div，将row课程放在ul上，将col-sm-3课程放在li上。

使用div作为ul的孩子的任何有效方法？

1 个答案: