Wordpress Bootstrap菜单 - 在较小的响应式视图中将搜索框左对齐？

Question

网站网址：http://scc.maxworks.org/wo-wp0001/

我需要将搜索框放到网站顶部的导航菜单中，这是我做的（它是无序列表中的div），它在计算机屏幕上放置我想要的位置。现在我试图让它在平板电脑或手机上表现得像我想要的那样 - 当你点击菜单图标打开列表时，我想要对齐到屏幕的左侧。 （实际上我希望搜索框出现在菜单图标的旁边，但我觉得这时我的技能已经超出了我的能力。所以我想在较小的视图中将它对齐到左边。

我正在使用bootstrap。

Answer 1

在bootstrapwp.css中 发现

ul#main-menu.nav li form#searchform div {
  display: block;
  overflow: hidden;
  padding: 0 0 0 380px;
}

删除填充

ul#main-menu.nav li form#searchform div {
  display: block;
  overflow: hidden;
}

Answer 2

我想你想检查一下this。您可以使用响应实用程序类。因此，将2个搜索框放入并隐藏在不需要的分辨率上。可能不是超级最好的方式，但它的工作原理很快。

可能有一些花哨的js方法来实现这一目标，无法帮助你。