Bootstrap modal：这么多div：我做错了吗？

Question

我是BootStrap的新手（使用v4），尽管查看了文档并看了数小时的视频教程，但我感觉我在方式上工作太辛苦了，无法做简单的事情。

下面的模态花了我整整一天的时间。它可以工作，但是我设置的模态不正确吗？ modal-dialog，modal-content，modal-body的封闭div太多了，但是当我注释掉它们时，模态结构就崩溃了。有没有更简单的方法来设置具有自定义内容的模态（在这种情况下，是选项卡式导航组件）？

（颜色芯片card占位符内容是动态添加的，因此不在下面的代码中）

---

---

 <div class="modal fade" id="icon-picker">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-4 p-0">
                                <div class="nav flex-column nav-pills" id="picker-tab" role="tablist">
                                    <a class="nav-link active" id="picker-shapes-tab" data-toggle="pill" href="#picker-shapes" role="tab">Shape
                                        Icons
                                    </a>
                                    <a class="nav-link" id="picker-images-tab" data-toggle="pill" href="#picker-images" role="tab">Image
                                        Icons
                                    </a>
                                    <a class="nav-link" id="picker-custom-tab" data-toggle="pill" href="#picker-custom" role="tab">Custom
                                        Icons
                                    </a>
                                </div>
                            </div>

                            <div class="col-5">
                                <div class="tab-content" id="picker-tabContent">
                                    <div class="tab-pane show active" id="picker-shapes" role="tabpanel">
                                        <div class="container">
                                            <div class="row picker-panel" id="picker-shape-content"></div>
                                        </div>
                                    </div>

                                    <div class="tab-pane" id="picker-images" role="tabpanel">
                                        <div class="container">
                                            <div class="row picker-panel" id="picker-image-content"></div>
                                        </div>
                                    </div>

                                    <div class="tab-pane" id="picker-custom" role="tabpanel">
                                        <div class="container">
                                            <div class="row picker-panel" id="picker-custom-content"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3 d-flex flex-row justify-content-center">
                                    <div class="col">
                                        <button id="pickerCancelBtn" class="btn btn-sm btn-outline-info">Cancel</button>
                                    </div>

                                    <div class="col">
                                        <button id="pickerOkBtn" class="btn btn-sm btn-primary">Select</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end modal -->
    </div>