小编may*_*tra的帖子

我正在使用Bootstrap 3设计一个页面.我试图placement: right在输入元素上使用popover .新的Bootstrap确保如果你使用form-control你基本上有一个全宽输入元素.

HTML代码看起来像这样:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

在我看来,弹出窗口宽度太低,因为它们不是div中剩下的任何宽度.我想在左侧输入表格,在右侧输入一个宽的弹出窗口.

大多数情况下,我正在寻找一个解决方案,我不必覆盖Bootstrap.

随附的JsFiddle.第二个输入选项.没有使用jsfiddle很多,所以不知道,但尝试增加输出框的大小来查看结果,在较小的屏幕上甚至看不到它. http://jsfiddle.net/Rqx8T/

我正在尝试使用animate.less库将动画添加到bootstraps模式.

当要显示模态时,动画完全正常工作.但是在隐藏模态时,动画无效.我创建了一个jsfiddle来复制它.

http://jsfiddle.net/W6G4q/1/

<a href="#" role="button" class="letclick btn btn-warning" id='loginLink' targetLink="login">     
        <i class="icon-user icon-white"></i>
        Sign In
    </a>
    <div class="modal hide login-modal animated bounceOutRight" tabindex="-1"  aria-labelledby="LoginModal" aria-hidden="true" id="login" >
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Login</h3>
</div>
<div class="modal-body">

 SHOWING
</div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
</div>

JS

     $('#loginLink').click(function(){
        $('#login').modal({
        backdrop: true,
        keyboard: true
    }).css({
        'width': function () {
            return (350) + 'px'; 
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });

        $('#login').toggleClass('bounceInLeft bounceOutRight')
    }); …