如何使Twitter启动模式全屏 [英] How to make Twitter bootstrap modal full screen

查看:1297
本文介绍了如何使Twitter启动模式全屏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

如何为上述代码全屏显示一个twitter启动模式弹出窗口, css但不能得到它的方式我想要的。

How do I make a twitter bootstrap modal popup full screen for the above code, I tried playing around with css but was not able get it the way I wanted. Can anyone please help me with it.

推荐答案

我在Bootstrap 3中使用以下代码实现了这一点:

I achieved this in Bootstrap 3 with the following code:

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

一般来说,当您对间距/填充问题有疑问时,单击(或cmd +单击mac)元素,并在Chrome上选择检查元素或在Firefox上使用firebug检查元素。尝试在元素面板中选择不同的HTML元素,并实时编辑右侧的CSS,直到获得所需的填充/间距。

In general, when you have questions about spacing / padding issues, try right+clicking (or cmd+clicking on mac) the element and select "inspect element" on Chrome or "inspect element with firebug" on Firefox. Try selecting different HTML elements in the "elements" panel and editing the CSS on the right in real-time until you get the padding / spacing you want.

这里是现场演示

这是一个指向

这篇关于如何使Twitter启动模式全屏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆