Use the Bootstrap Grid to Put Elements Side By Side


Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。

下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的:

an image illustrating Bootstrap's grid system

请注意,在这张图表中,class属性 col-md-* 正被使用。在这里,md 表示 medium (中等的),* 代表一个数字,它指定了这个元素所占的列宽。通过此图表的属性设置可知,在中等大小的屏幕上(例如笔记本电脑),元素的列宽被指定了。

在我们创建的 Cat Photo App 中,将会使用 col-xs-* ,其中 xs 是 extra small 缩写(应用于较小的屏幕,比如手机屏幕),* 是你需要填写的数字,代表在一行中,各个元素应该占的列宽。

Like, InfoDelete 三个按钮一并放入一个 <div class="row"> 元素中;然后,其中的每一个按钮都需要各自被一个 <div class="col-xs-4"> 元素包裹。

div 元素设置了 class 属性 row 之后,那几个按钮便可嵌入其中。

Run tests (ctrl + enter)