这是我第一次建立引导网站。我以为我知道这些列的工作原理，但是当我尝试使用它们时，它们占用了容器的100％宽度（而不是应该占用的1/4）。我曾尝试针对存在相同问题的人进行谷歌搜索，但找不到任何东西。所以，这就是我所拥有的...
HTML：
<body>
<div class = "hero container"></div>
<div class = "container-fluid how-it-works">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
<div class = "col-md-3"></div>
</div>
</div>
<div class = "featured container"></div>
<div class = "testimonials container"></div>
<div class = "about container"></div>
</body>
CSS：
.how-it-works {
height: 550px;
background-color: #f7f7f7;
}
.how-it-works .row .col-md-3 {
height: 550px;
background-color: blue;
width: 100%;
}
如果有人能弄清我在做什么错，我将非常感谢您的帮助。谢谢！
最佳答案
删除以下CSS（在引导程序列上设置宽度）：
.how-it-works .row .col-md-3 {
width: 100%;
}
例如col-md-3定义为：
.col-md-3 {
width: 25%;
}
然后您的代码对此进行了更改。删除它，它将再次占用1/4的空间。
关于html - 引导柱全宽并溢出容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34256903/