Bootstrap不包装没有大小的列

-1

所以我想让一些引导网格网站'教'我自己更多一点。我已阅读here的来龙去脉，并开始尝试在该页面上创建示例。Bootstrap不包装没有大小的列

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

像这样：

然而，我所得到的却是这样的：

的颜色和比特填充的是我唯一添加到基线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。

我不知道为什么我的列不想堆叠在一起，如示例中所示，请帮助。

来源

2017-06-02 Dellirium

看起来像你正在阅读的文档，以引导4阿尔法（4代码的bootply]（代码HTTPS ：//www.bootply.com/z5aUQKNCqK）），但是使用bootstrap 3 - [你的代码在3中的引导]（https://www.bootply.com/IgGas1aQTs） - 这里是3的文档：http：/ /getbootstrap.com/css/ – Pete

正如@Pete所述。有可能你可能一直在使用bootstrap-3 cdn。请尝试从官方网站加载bootstrap 4 – Sagar

@Pete好的，那很可能是那种情况。尽管如何使用bootstrap 4？我正在使用w3schools的CDN。我不知道它给了我一个。 – Dellirium

它的运行没有任何变化 - 这里是Bootstrap-v4

.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); 
 
}

<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     1 of 2 
 
    </div> 
 
    <div class="col"> 
 
     1 of 2 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-02 11:16:20 UfguFugullu

那么我的页面有什么问题？实际上没有任何改变。 CDN有没有可能提供正确的引导程序？ O操作。0 我正在使用w2school的CDN链接 – Dellirium

@Dellirium可能cdn链接指向引导3 – Sagar

@Ufgu感谢您指出我的错误。从来没有想过引导4 – Sagar

Bootstrap不包装没有大小的列

回答

相关问题