Html 为什么jumbotron没有覆盖潜水舱的高度？

我正在学习bootstrap，我正在制作一个测试页面，在这个页面中，我在一个jumbotron中有两个div

通常情况下，jumbotron有一个灰色背景，覆盖了它里面的所有内容，但是当我添加这两个div时，jumbotron的高度会更改为大约50px高，而不覆盖我添加的其他两个div的高度

谁能告诉我怎么解决这个问题吗

---

HTML:

<div class="container">
    <div class="jumbotron">
        <div class="col-sm-8">
            <ul class="rectangle-list">
                <li><a href="">List1 </a>
                    <ul>
                        <li><a href="">Element </a>
                            <ul>
                                <li><a href="">Element</a> </li>
                                <li><a href="">Element</a> </li>
                                <li><a href="">Element</a> </li>
                            </ul>
                        </li>
                        <li><a href="">Element</a>
                            <ul>
                                <li><a href="">Element</a></li>
                                <li><a href="">Element</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="col-sm-4">

            <img src="images/image.jpeg" class="img-responsive"/>
            <img src="images/image.jpeg" class="img-responsive"/>
        </div>

    </div>

    <div class="col-sm-12">
        <a href="#" class="btn btn-warning "><span class="glyphicon glyphicon-eye-open"></span> Button</a>
    </div>
</div>

在第二张图片上，你可以看到灰色容器是如何变小的。

我已经猜到了

在引导过程中，col-div应该嵌套在

最终代码：

HTML:

您正在错误地关闭标签。检查您的ul和li结束标记。我更改了它们，但仍然相同。您发布的代码是正确的，如中所示。问题可能出在您的自定义css中。@Choma如果您使小提琴上的结果屏幕变宽，同样的情况也会发生，我的页面在小尺寸时也会正确地显示jumbotron，但在中大屏幕中会发生这种情况。

<div class="container">
    <div class="jumbotron">
     <div class="row">
        <div class="col-sm-8">
            <ul class="rectangle-list">
                <li><a href="">List1 </a>
                    <ul>
                        <li><a href="">Element </a>
                            <ul>
                                <li><a href="">Element</a> </li>
                                <li><a href="">Element</a> </li>
                                <li><a href="">Element</a> </li>
                            </ul>
                        </li>
                        <li><a href="">Element</a>
                            <ul>
                                <li><a href="">Element</a></li>
                                <li><a href="">Element</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="col-sm-4">

            <img src="images/image.jpeg" class="img-responsive"/>
            <img src="images/image.jpeg" class="img-responsive"/>
        </div>
      </div>
    </div>

    <div class="col-sm-12">
        <a href="#" class="btn btn-warning "><span class="glyphicon glyphicon-eye-open"></span> Button</a>
    </div>
</div>