2

我对 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 尝试过各种事情，并且成功地滑动了表单，但我总是遇到上面描述的问题。

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

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

亲切的问候！

4

1 回答 1

0

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

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

于 2012-10-24T18:01:46.580 回答