时间戳

首页 > 解决方案 > 为什么这些嵌套的 Bootstrap 行不起作用

bootstrap-4 - 为什么这些嵌套的 Bootstrap 行不起作用

问题描述

我在一个 Bootstrap 列中有两级嵌套的 Bootstrap 行。我已经在代码中注释了哪些有效，哪些无效。在我希望每个嵌套行中每个只有 6 个的情况下，它显示为 6，但下一列不会填满其他 6，而是包裹在它下面。在每种情况下，都不会显示两列。很难描述 Bootstrap 的问题，而且该网站没有发布，所以我不能展示它。

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-9"> <!--this works-->
            <div class="iframe-container">
                <iframe src="https://player.vimeo.com/video/23912696" allow="autoplay; fullscreen" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-12 col-lg-3"> <!--this works-->
            <row>
                <div class="col-6 col-lg-12"> <!--this doesn't work-->
                    <row>
                        <div class="col-6"><img src="images/plasticSurgery.jpg" class="thumb" /></div><!--this doesn't work-->
                        <div class="col-6 thumbP">Plastic Surgery</div><!--this doesn't work-->
                        <div class="col-6"><img src="images/plasticSurgery.jpg" class="thumb" /></div><!--this doesn't work-->
                        <div class="col-6 thumbP">Plastic Surgery Dr</div><!--this doesn't work-->
                    </row>
                </div>
                <div class="col-6 col-lg-12"> <!--this doesn't work-->
                    <row>
                        <div class="col-6"><img src="images/plasticSurgery.jpg" class="thumb" /></div> <!--this doesn't work-->
                        <div class="col-6 thumbP">Plastic Surgery</div> <!--this doesn't work-->
                        <div class="col-6"><img src="images/plasticSurgery.jpg" class="thumb" /></div> <!--this doesn't work-->
                        <div class="col-6 thumbP">Plastic Surgery</div> <!--this doesn't work-->
                    </row>
                </div>
            </row>
        </div>
    </div>
</div>

标签： bootstrap-4

解决方案

<row>

不是有效的 HTML 元素。也许你应该改变它：

<div class="row"></div>

它是定义行容器的 Bootstrap 方式。

推荐阅读