使用之前我们介绍的响应式的工具类 ...

想把这个 订阅课程的按钮在手机大小的设备上隐藏的话 ... 可以在这个元素上面加上一个 hidden-xs ...

修改

再回到编辑器去修改一下 ... 找到 订阅课程 这个按钮 ... 在它上面，加上一个 hidden-xs 类 ... 然后再去调整一下搜索按钮的位置 ... 打开自定义的样式表 ...

因为 Bootstrap 3 是移动优先的设计思想，所以，默认所有的样式都是会应用到小尺寸的移动设备上的 ... 比如像手机大小的设备 ... 这样我们就可以直接去修改一下这个搜索按钮的位置 ...

把 top 属性的值，设置成 25% ...

然后我们再通过媒体查询，去设置一下这个按钮在其它尺寸的设备上的显示位置 ...

@media (min-width: 768px) {
.navbar-inverse button[type="submit"] {
top: 15%;
}
}

这样这个按钮在窗口宽度大于或等于 768 像素的时候，它的 top 的位置是 15% ...

保存 ... 回到浏览器 ...

点击这个按钮 ... 现在， 你会看到，订阅课程的 按钮已经被隐藏起来了 ... 这个搜索按钮的位置也会有一些变化 ...

再放大窗口的宽度 .... 订阅课程 这个按钮又会显示出来 ... 并且这个搜索按钮的位置也会显示在合适的位置上 ...