Question

我有以下基本代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                text here
            </div>
        </div>
    </div>
</div>

根据Bootstrap documentation，使用课程container将在px中使用固定宽度，使用container-fluid将使用％。

但是当我查看Chrome开发者工具中的CSS源代码时，我看到了：

@media (min-width: 1200px) .container {width: 1170px;}
@media (min-width: 992px)  .col-md-12 {width: 100%;}
@media (min-width: 992px)  .col-md-6 { width: 50%;}

为什么Bootstrap使用流体网格而不是固定网格？我正在使用Bootstrap版本3.3.6

Answer 1

container具有固定的宽度，但其中的列具有“流动”宽度（实际上是固定的，因为容器具有固定的宽度）。

如果使用container-fluid，整个容器将具有流体宽度，因此其中的列也将如此。

Answer 2

Bootstrap用于响应式设计。

容器具有固定的宽度，因为当您的屏幕超过1200px时，它将使您的页面保持居中。当您的屏幕宽度低于768px时，容器宽度将设置为auto，容器的左右边距为15px。

列以％表示，因为它们随设备的宽度而缩放。所以当屏幕大于768px时，带有col-md-12类的div总是屏幕大小的整个宽度或容器的宽度。如果屏幕尺寸高于默认值md值，则col-md-6的div将占屏幕或容器的50％我相信这是992px，否则div是屏幕宽度的100％。

Answer 3

使用bin2hex(openssl_random_pseudo_bytes($thenumberIwanttouse, $cstrong));并没有真正做到这一点 - 它只是插入了一个非常标准的container-fluid，其宽度超过其父级的 100％ - 这是默认的div行为，除非覆盖... div的特殊之处在于它在左侧和右侧都有15px的装订/填充（container-fluid类稍后补偿负利润率。）

另一方面，row类具有固定宽度，其根据用户的视口而改变。 container类在左/右也有15px的填充，这又由container类补偿，两边都有负边距（-15px）。在row中添加列时，列本身在左侧/右侧有15px的填充，因此修复了装订线。

为什么bootstrap使用流体柱宽而不是固定宽度？

3 个答案: