Question

我是Twitter的Bootstrap框架的新手。我已经覆盖了很多编码，但我遇到了一些问题。

我的登录表单放在我的'navbar'中，如下所示：

<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/

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

Twitter Bootstrap：Navbar输入字段在响应模式下变宽

1 个答案: