如何更改Twitter Bootstrap模式框的默认宽度? [英] How can I change the default width of a Twitter Bootstrap modal box?
问题描述
我尝试了以下内容:
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id='dialog-heading'></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
</div>
</div>
这个Javascript:
And this Javascript:
$('.modal-admin').css('width', '750px');
$('.modal-admin').css('margin', '100px auto 100px auto');
$('.modal-admin').modal('show')
结果不是我的预期。模态左上方位于屏幕中央。
The result is not what I expected. The modal top left is positioned in the center of the screen.
任何人都可以帮助我。有没有人试过这个。我认为这不是一件不寻常的事情。
Can anyone help me. Has anyone else tried this. I assume it's not an unusual thing to want to do.
推荐答案
更新:
在 bootstrap 3
中,您需要更改模态对话框。
因此,在这种情况下,您可以在模态对话框
的位置添加类 modal-admin
。
In bootstrap 3
you need to change the modal-dialog.
So in this case you can add the class modal-admin
in the place where modal-dialog
stands.
原始答案(Bootstrap< 3)
是否确定你之所以想用JS / jQuery改变它吗?
Is there a certain reason you're trying to change it with JS/jQuery?
您可以使用CSS轻松完成,这意味着您无需在文档中进行样式设置。
在您自己的自定义CSS文件中,您添加:
You can easily do it with just CSS, which means you don't have to do your styling in the document. In your own custom CSS file, you add:
body .modal {
/* new custom width */
width: 560px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -280px;
}
在您的情况下:
body .modal-admin {
/* new custom width */
width: 750px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -375px;
}
我把身体放在选择器之前的原因是它需要更高的优先级比默认值。这样您就可以将其添加到自定义CSS文件中,而无需担心更新Bootstrap。
The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.
这篇关于如何更改Twitter Bootstrap模式框的默认宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!