在＆＃39;行中显示项目＆＃39;

Question

我正在学习HTML + CSS，我不理解以下内容：

如果我的代码如下所示，那么显示将是这样的： CSS：

 .col-sm-4 {
     width: 24%;
    float:right;
    border: 1px solid #000000;
}

.Row {
    border: 3px solid #57b1dc;
}

HTML：

<div class="Row">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
    </div>

    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
    </div>
</div>

结果：

但是，当我将课程.col-sm-4应用于我的所有div元素时，会突然发生这样的边界转移：

对我来说，看起来我的所有元素都不再是主要div项目的一部分。

为什么我需要这个：

我找到了bootstrapper，我尝试理解在文档中很好地布置项目的概念（这样，连续有4列）