先添加一个文本框 .. 上面加上 form-control 这个类 .. 再添加一个 placeholder 设置一下点位符文字 ..

我们可以再复制一份 .. 两个文本框会堆叠到一块儿显示 .. 它们之间没有间隔 .. 我们可以给表单元素再添加一个包装 .. 一个 div，上面加上 form-group 这个类 ..

然后再复制一份 .. 这回你会发现，现在两个表单元素之间就会留出一点空来 ..

我们也可以使用布局类去布局一下表单里面的元素 .. 选中这两个元素 .. 再给它们添加一个包装 .. 上面加上 row ..

然后选中这两个表单元素的包装元素 .. 上面可以使用 col 类去设置布局 .. 先给它们添加一个统一的 col ...

现在页面上显示的这两个表单元素会在一行显示 ..

它们之间会有一些间隔 .. 想让这个间隔变得小一点，可以把这个 row 换成一个 form-row ..

再选中第一个表单元素的包装 .. 把 col 换成 col-sm-8 .. 意思就是在小尺寸宽度的浏览窗口，让它占用 8 个网格的宽度 .. 剩下的 4 个网格留给其它的元素显示 ..

现在默认这两个表单元素会堆叠到一块儿 .. 到了小尺寸宽度的时候 .. 最上面这个文本框会占用 8 个网格的宽度 ..