Html 引导井组件不包含内容

我的页面有以下html。我试图弄明白为什么well组件的内容没有包含在元素中。它从井外的元素开始

<div class="row">
    <div class="well">
        <div class="col-md-6">
            <h2>Education</h2>
            <ul>
                <li>School 1</li>
                <li>School 2</li>       
            </ul>
        </div>
        <div class="col-md-6">
            <h2>Education</h2>
            <ul>
                <li>School 1</li>
                <li>School 2</li>       
            </ul>
        </div>      
    </div>
</div>

.well {
    background-color: #9999FF;
    padding: 30px;
    margin-top: 50px;
}

教育类

第一学校
第二学校

教育类

第一学校
第二学校

.嗯{
背景色：#9999FF；
填充：30px；
边缘顶部：50px；
}

尝试将井级添加到外部div

教育类

第一学校
第二学校

教育类

第一学校
第二学校

尝试将井级添加到外部div

教育类

第一学校
第二学校

教育类

第一学校
第二学校

在引导中，所有

列-*

元素都向左浮动，这意味着父元素（即

行

）没有完全围绕子元素。您应该尝试将井保持在

col-*

元素中。否则，您也可以使井环绕整个

行，这也可以实现您的愿望。
在引导中，所有
列-*
元素都向左浮动，这意味着父元素（即
行
）没有完全环绕子元素。您应该尝试将井保持在
col-*
元素中。否则，您也可以将井环绕整个
行
，这也可能实现您的愿望。
您是否同意EatpeanutButter的答案，但我不喜欢修改引导元素。您是否同意EatpeanutButter的答案，但我不喜欢修改引导元素。
<div class="row well">
        <div class="col-md-6">
            <h2>Education</h2>
            <ul>
                <li>School 1</li>
                <li>School 2</li>       
            </ul>
        </div>
        <div class="col-md-6">
            <h2>Education</h2>
            <ul>
                <li>School 1</li>
                <li>School 2</li>       
            </ul>
        </div>      
</div>