jquery - Twitter Bootstrap : Navbar input fields to wide in responsive mode

Question

我对 Twitter 的 Bootstrap 框架有点陌生。我已经涵盖了很多编码，但我仍然遇到一些问题。

我在“导航栏”中放置了登录表单，如下所示:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <div id="login-div">
          <form class="navbar-form pull-left" id="login-form">
            <input type="text" class="input-block-level" id="login-username" placeholder="gebruikersnaam">              
            <input type="password"  class="input-block-level" id="login-password" placeholder="wachtwoord">
          </form>
          <img src="img/button_ledensite_50.png" id="login-button" class="pull-left">
        </div>

        <img src="img/button_zoeken_50.png" class="pull-right" id="btn-search">
        <a class="btn btn-navbar" id="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div class="nav-collapse collapse">
          <ul class="nav pull-right">
            <li class=""><a href="#">informatie</a></li>
            <li><a href="#about">groepen</a></li>
            <li><a href="#contact">nieuws</a></li>
            <li><a href="#contact">agenda</a></li>
            <li><a href="#contact">multimedia</a></li>
            <li><a href="#contact">shop</a></li>
          </ul>
          <div><input type="text" placeholder="Zoeken.." id="resp-search"></div>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

我想要它做的是，当我点击这张图片时:

<img src="img/button_ledensite_50.png" id="login-button" class="pull-left">

我想将表单向右滑动，从而将图像推开，但表单可能不会在响应模式下突破屏幕，或者打破线条并将图像推到导航栏中的第二行。我用 jQuery 尝试了各种方法，并且成功地滑动了表单，但我总是遇到上面描述的问题。

抱歉我的英语不好，但我无法用其他方式解释它..

我希望有人能帮助我，因为我在谷歌上到处搜索，但没有找到任何东西。

亲切的问候!

Answer 1

看看这个:http://darcyclarke.me/development/animate-float-positions-in-jquery-1-5/

也许你可以将 float 动画设置到正确的位置并将图像的宽度设置为 0px