任何将div用作ul的子代的有效方法吗？

Question

我正在使用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 。