使用搜索按钮创建响应式导航栏

我正在尝试使用bootstrap创建一个响应式导航栏。 我想建立像http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar 。 。

但搜索按钮不会向右移动,折叠时标签会分开并移动到下面的一行。 在下载Wordpress按钮的地方我想要LogIn和SignUp按钮。 折叠品牌名称时,搜索按钮和打开菜单的栏应显示在同一行中。

有人可以告诉你怎么做吗? 看我的代码

  
.navbar { min-height: 120px; } .navbar .container { padding-top: 20px; padding-bottom: 20px; } .navbar-nav>li>a { text-transform: uppercase; font-family: "jokerman"; font-size: 16px; } @media (min-width: 768px) { .navbar-nav { margin: 0 auto; display: table; table-layout: fixed; float: none; } }

我真的不明白你的search-input是否应该在xs视图中可见但是这里有一些工作:

Js Fidlle : http : //jsfiddle.net/8hrnkbaL/1/

你的小提琴中的第一个问题是在jQuery之前加载了bootstrap,但jQuery必须首先加载

HTML:

  

我为你绘制了这个例子,这就是我的意思,保持简单,随意使用它并使用css3媒体查询编辑移动设备。 ps你也可以使用:

 position:absolue;right:7px; 

对于移动设备右侧的菜单切换按钮,您还可以使用:

 position:absolue;left:7px; 

对于左边的ul,祝你好运 – Millzie 🙂

   My menu V.1