Question

我正在使用Twitter Bootstrap 3.1.1中的模态，而且我的模态对于比700像素更窄的屏幕来说是非常无用的和边缘侵入。

是否有一个简单的功能或方法来禁用小屏幕的模式？

编辑：添加了相关的HTML：

<div class="post-body-img">
    <a data-toggle="modal" data-target="#myModal">
        <img src="test.jpg">
    </a>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <a data-dismiss="modal">
                    <img src="test.jpg">
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

是的，使用Bootstrap响应实用程序类。您可以将visible-md和visible-lg添加到模态链接中。启动模态的链接仅显示在中等（> = 992px）或大（＆gt; = 1200px）屏幕上。

More info at Bootstrap docs

如果您不想在较小的屏幕上隐藏模态链接，则只需添加另一个。所以你会有两个这样的链接：

<div class="post-body-img">
    <a class="hidden-xs" data-toggle="modal" data-target="#myModal"> <!--hidden on mobile, add hidden-sm to hide on tablet-->
        <img src="http://placehold.it/100">
    </a>
    <a class="visible-xs"> <!--shows on mobile, add visible-sm to show on tablet-->
      <img src="http://placehold.it/100">
    </a>
</div>

Bootply demo

Answer 2

可以使用带有!important声明的CSS隐藏模态及其背景，当模态打开时，该声明会覆盖模态元素上的内联display:block样式。要将其隐藏在特定大小，只需将以下CSS放入相关的媒体查询中：

#yourModalID.modal.in,
#yourModalID.modal.in + .modal-backdrop.in
{
    display:none !important;
}

是否有一种简单的方法可以禁用小屏幕的特定模式？

2 个答案: