Bootstrap栅格超出宽度怎么办

最近项目中遇到的问题，比如div container下的同一个row下有两个div的class分别为col-md-2与col-md-10。


当其中的元素宽度超过宽度时，并不会换行，反而被撑爆了？

（在左边就会被遮挡，在右边就会扩开浏览器宽度）


想问一下是怎么回事，怎么解决呢？


效果图示意如下：




代码就是随便写的测试如下：

<div class="container">
    <div class="row">
        <div class="col-xs-10">
            <div class="jumbotron">
                <h1>Hello, world!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-2">
            <div class="jumbotron">
                <h1>Hello, world!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
                <p>...!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2">
            <div class="jumbotron">
                <h1>Hello, world!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-10">
            <div class="jumbotron">
                <h1>Hello, world!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
                <p>...!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
            </div>
        </div>
    </div>
</div>

https://blog.csdn.net/LeizRo/article/details/89334591