html - 为什么大屏幕没有覆盖 div 的高度？

Question

我正在学习 bootstrap，我正在制作一个测试页面，其中我在一个大屏幕中有两个 div。

通常，大屏幕有一个灰色背景，覆盖了其中的所有内容，但是当我添加这两个 div 时，大屏幕将高度更改为大约 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>

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

Answer 1

我明白了!

在 Bootstrap 中，col-div 应该嵌套在 <div class='row'> 内。

最终代码:

HTML:

<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>