在页面上我需要一块等分宽度显示的布局 .. 在这个 container 类的容器里面 ， 每排内容我们都放在一个带 row 这个类的容器里 .. row 就是排，或者行的意思 ..

这个 row 里面的每一栏的内容，可以单独放在一个容器里面，这个容器的上面可以添加一个 col ，表示 column ..

在每个栏的容器里面你可以去包装任何的内容，比如图片，视频，文字等等 ... 这里为了演示，我们可以先在里面添加一个简单的数字 .. 这个数字可以放在一个 span 标签里面 ..

然后再去添加两个这样的容器 ..

回到浏览器 .. 可以预览一下 ..

预览

为了显示的更清楚一些，我们去添加点自定义的样式 .. 打开 style.css ，设置一下 .container.demo 下面的 .row ，background 设置成 #021d51 ... border-bottom .. 1px solid #000 .

再设置一下 .container.demo .row 下面的 div 下面的 span 标签的样式 .. display 设置成 block .. background 是 #487bdd .. color 是 white .. font-size 是 32px .. padding 添加点内边距 .. 大小是 8px .. 再添加一个 border，1px solid #021d51

现在你可以很容易看出哪块是 container，那块地方是 row .. 每个 row 里面有三个 column .. 这几栏内容会等分 row 的宽度 ..

我们可以继续往这个 row 里面添加新的 column，row 里面的所有的 column 会一直等分 row 的宽度 .. 新的 Bootstrap 用了 flexbox 布局 ...

在开发者工具的元素这里，选中页面上的 row 这个元素 .. 在样式这里你会发现，它的 display 属性设置成了 flex ... 就是在这个元素上使用 flexbox 来布局 .. flexbox 是 css 的布局模型，在宁皓网有个专门的课程介绍了这种布局方法 ...

再选中一个 column 容器 .. 你会看到在这个 col 类上面，把 flex-grow 设置成了 1 ... 也就是在 flexobx 元素里面应用了这个 col 类的元素都会等分显示 ..

我们可以去掉这个样式 .. 现在元素就只会点用它原本的宽度了 ..