Bootstrap没有包装没有大小的列

Question

所以我试图建立一些引导网格网站来“教”自己一点关于它。我已经阅读了 here 发布的详细信息，并开始尝试从该页面制作示例。

现在，在第一个例子中我遇到了一个问题，主要是它们显示的是没有“大小”的列的“行为”，它们的大小都相等，占用了一行。

同样如此：

但是，我得到的是：

颜色和一点填充是我添加到基线HTML / CSS页面的唯一内容，这是我从上面链接的页面上的示例复制的，这是额外的CSS：

.row{
    /*background-color: lightblue;*/
    border: 3px solid rgba(86,61,124,.2);
}
.row>.col{
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

bootstrap CSS，js和jQuery都取自w3schools建议的CDN。

我不知道为什么我的列不想彼此堆叠，如示例所示，帮助请。

Answer 1

它在没有任何更改的情况下运行 - 这是Bootstrap-v4

的代码

＆＃13;

＆＃13;

func addRestaurant()
{
    ref = FIRDatabase.database().reference().child("restaurants")        
    let key = ref?.childByAutoId().key        
    let name = addName.text        
    let phone = addPhone.text        
    ref?.child(key!).setValue(["name": name, "phone": phone, "image": imageURL])

}

＆＃13;

.row {
    /*background-color: lightblue;*/
    border: 3px solid rgba(86,61,124,.2);
}
.row > .col {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

＆＃13;

＆＃13;

＆＃13;