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

问题描述

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

我如何为上面的代码制作一个 twitter bootstrap 模式弹出全屏，我尝试使用 css 但无法按我想要的方式得到它.任何人都可以帮助我.

解决方案

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

.modal-dialog {宽度:100%；高度:100%；边距:0；填充:0；}.modal-content {高度:自动；最小高度:100%；边界半径:0；}

通常，当您对间距/填充问题有疑问时，请尝试右键+单击(或 cmd+单击 Mac)元素并在 Chrome 上选择检查元素"或在 Firefox 上选择使用萤火虫检查元素".尝试在元素"面板中选择不同的 HTML 元素并实时编辑右侧的 CSS，直到获得所需的填充/间距.

这里是现场演示

这里是小提琴的链接

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

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.

解决方案

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;
}

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.

Here is a live demo

Here is a link to the fiddle

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