如何动态增加div

Question

此帖子已隐藏。您在7分钟前删除了此信息。附加输出图像

我有一个由for循环动态生成的div。

[第一个div具有col-sm-3第二个div具有col-sm-3第三div有一个标签，该标签需要显示两个（ed：??），但锚标签已移至第一列。我希望所有标签都显示在第三栏中。

代码：-

                                <legend class="legendOption">Option1</legend>



                                <div class="row">
                                <div class="col-sm-3 ">
                                    <div class="name">
                                        <p>Student name</p>
                                    </div>
                                    <h6 class="new">Priya</h6>
                                </div>
                                <div class="col-sm-3 ">
                                    <div class="course">
                                        <p>Course</p>
                                    </div>
                                    <h6 class="new">Math</h6>
                                </div>
                                <div class="">
                                    <div class="file">
                                        <p>Student File</p>
                                    </div>

                                        <div class="col-lg-3" style="padding-left:1rem;left: -10px;position: relative;">

                                            <img src="/Resources/Ecvrf/images/attached.png" class="pdfImage" title="Free-Grammar-Ebook-Level-2.pdf">
                                                <a id="AudioLink_0" value="C:\AddCostEstimate\3089_1_11282019_\Meeting\_1Free-Grammar-Ebook-Level-2.pdf" title="Free-Grammar-Ebook-Level-2.pdf" style="line-height: 1.7;color: dodgerblue;font-size: 1.3rem">
                                                    Free-Grammar-Eb...
                                                </a>


                                        </div>
                                        <div class="col-lg-3" style="padding-left: 1rem;left: -10px;position: relative;">


                                                <a  title="Free-Grammar-Ebook-Level-2.pdf" style="line-height: 1.7;color: blue;font-size: 1.3rem">
                                                    Free-Grammar-Eb...
                                                </a>


                                        </div>
                                        <div class="col-lg-3" style="padding-left: 1rem;left: -10px;position: relative;">


                                                <a title="Free-Grammar-Ebook-Level-2.pdf" style="line-height: 1.7;color: dodgerblue;font-size: 1.3rem">
                                                    Free-Grammar-Eb...
                                                </a>


                                        </div>
                                        <div class="col-lg-3" style="padding-left: 1rem;left: -10px;position: relative;">

                                            <img src="/Resources/Ecvrf/images/attached.png" class="pdfImage" title="Free-Grammar-Ebook-Level-2.pdf">
                                                <a title="Free-Grammar-Ebook-Level-2.pdf"  style="line-height: 1.7;color: dodgerblue;font-size: 1.3rem">
                                                    Free-Grammar-Eb...
                                                </a>


                                        </div>
                                        <div class="col-lg-3" style="padding-left: 1rem;left: -10px;position: relative;">

                                                <a title="Free-Grammar-Ebook-Level-2.pdf"  style="line-height: 1.7;color: dodgerblue;font-size: 1.3rem">
                                                    Free-Grammar-Eb...
                                                </a>


                                        </div>
                                        <div class="col-lg-3" style="padding-left: 1rem;left: -10px;position: relative;">


                                                <a  title="Free-Grammar-Ebook-Level-2.pdf" style="line-height: 1.7;color: blue;font-size: 1.3rem">
                                                    Free-Grammar-Eb...
                                                </a>


                                        </div>
                                        <div class="col-lg-3" style="padding-left: 1rem;left: -10px;position: relative;">

                                            <img src="/Resources/Ecvrf/images/attached.png" class="pdfImage" title="Free-Grammar-Ebook-Level-2.pdf">
                                                <a  title="Free-Grammar-Ebook-Level-2.pdf"  style="line-height: 1.7;color: dodgerblue;font-size: 1.3rem">
                                                    Free-Grammar-Eb...
                                                </a>


                                        </div>



                                </div>
                               </div>

                        </div>

Answer 1

为什么将col-lg-3标签放在无类标签中？

此外，col-sm-3适用于小屏幕尺寸（例如电话屏幕）

因此，我不明白为什么要将所有col-lg标记放在无类标记中。

您可以参考文档以了解网格系统如何在Bootstrap中工作：https://getbootstrap.com/docs/4.1/layout/grid/

此外，这是一个很棒的视频，解释了您需要解决的所有问题https://www.youtube.com/watch?v=cHAcSQyvBqQ