我对 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 尝试了各种方法,并且成功地滑动了表单,但我总是遇到上面描述的问题。
抱歉我的英语不好,但我无法用其他方式解释它..
我希望有人能帮助我,因为我在谷歌上到处搜索,但没有找到任何东西。
亲切的问候!
最佳答案
看看这个:http://darcyclarke.me/development/animate-float-positions-in-jquery-1-5/
也许你可以将 float 动画设置到正确的位置并将图像的宽度设置为 0px
关于jquery - Twitter Bootstrap : Navbar input fields to wide in responsive mode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13038131/