blocks|key|113395|text|您应该能够使用.modal-dialog类选择器(结合media+queries或用于响应式设计的任何策略)来调整宽度：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113396|.modal-dialog+{
++++width:+400px;
}|code-block|syntax|javascript|113397|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/css/media-queries-for-standard-devices/^0|7|D|R|D|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>You should be able to adjust the width using the <code>.modal-dialog</code> class selector (in conjunction with <a href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/" rel="noreferrer">media queries</a> or whatever strategy you're using for responsive design):</p>

<pre><code>.modal-dialog {
    width: 400px;
}
</code></pre>


blocks|key|113438|text|在docs中：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|113439|模态有两个可选的大小，可以通过放置在.modal-dialog上的修饰符类获得：modal-lg和modal-sm+(从3.1开始)。|style|CODE|113440|此外，模式对话将在小屏幕上scale+itself+(从3.1.1开始)。|113441|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/javascript/#modals-examples|1|https://github.com/twbs/bootstrap/pull/12470^0|1|4|0|0|I|D|14|8|1D|8|0|D|C|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@$A|Y|B|Z|F|G]|$A|10|B|11|F|G]|$A|12|B|13|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|J|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

<p>From the <a href="http://getbootstrap.com/javascript/#modals-examples">docs</a>: </p>

<p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>: <code>modal-lg</code> and <code>modal-sm</code> (as of 3.1).  </p>

<p>Also the modal dialogue will <a href="https://github.com/twbs/bootstrap/pull/12470">scale itself</a> on small screens (as of 3.1.1).</p>


blocks|key|113467|text|我也遇到了同样的问题，在Modals.less下的更低版本中为@screen-xs-min添加了一个媒体查询，解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113468|@media+(max-width:+@screen-xs-min)+{
++.modal-xs+{+width:+@modal-sm;+}
}|code-block|syntax|javascript|113469|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had the same issue I have resolved by adding a media query for @screen-xs-min in less version under Modals.less</p>

<pre><code>@media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
}
</code></pre>


blocks|key|113555|text|老帖子。我最终设置了媒体查询，并为每个断点使用了max-width:+YYpx;和width:auto;。这也将缩放w/图像(根据假设您在md屏幕上有一个宽度为740px的图像)，模式将缩小到740px+(如果应用，则不包括.modal-body的填充)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113556|<div+class="modal+fade"+id="bs-button-info-modal"+tabindex="-1"+role="dialog"+aria-labelledby="Button+Information+Modal">
++++<div+class="modal-dialog+modal-dialog-centered"+role="document">
++++++++<div+class="modal-content">
++++++++++++<button+type="button"+class="close"+data-dismiss="modal"+aria-label="Close">
++++++++++++++++<span+aria-hidden="true">&times;</span>
++++++++++++</button>
++++++++++++<div+class="modal-body"></div>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|113557|注意，我使用的是SCSS，bootstrap+3.3.7，并且没有对_bootstrap.scss导入的_modals.scss文件进行任何额外的编辑。下面的CSS被添加到一个额外的SCSS文件中，并在_bootstrap.scss之后导入。|113558|同样重要的是要注意，.modal-dialog的原始引导样式不是为缺省的992px断点设置的，仅与768px断点一样高(它具有应用于width:+600px;的硬设置宽度，因此我使用/+width:+auto;覆盖它。|113559|@media+(min-width:+$screen-sm-min)+{+//+this+is+the+768px+breakpoint
++++.modal-dialog+{
++++++++max-width:+600px;
++++++++width:+auto;
++++}
}

@media+(min-width:+$screen-md-min)+{+//+this+is+the+992px+breakpoint
++++.modal-dialog+{+
++++++++max-width:+800px;
++++}
}|113560|下面是一个响应图像的模式示例。|113561|​|113562|📷|atomic|113563|113564|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/8e6fd7b2db68f1c4035c38118125c074.jpeg|imageAlt^0|O|G|15|B|1X|2|34|B|0|0|Y|F|1G|C|2T|F|0|A|D|1U|D|2L|C|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1V|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1W|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1X|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|X|3|T|5|6|7|22|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15|16|-4]]]]

<p>Old post. I ended up setting media queries and using <code>max-width: YYpx;</code> and <code>width:auto;</code> for each breakpoint. This will scale w/ images as well (per say you have an image that's 740px width on the <code>md</code> screen), the modal will scale down to 740px (excluding padding for the <code>.modal-body</code>, if applied)</p>

<pre><code>&lt;div class="modal fade" id="bs-button-info-modal" tabindex="-1" role="dialog" aria-labelledby="Button Information Modal"&gt;
    &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
        &lt;div class="modal-content"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
            &lt;div class="modal-body"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Note that I'm using SCSS, bootstrap 3.3.7, and did not make any additional edits to the <code>_modals.scss</code> file that <code>_bootstrap.scss</code> imports. The CSS below is added to an additional SCSS file and imported AFTER <code>_bootstrap.scss</code>.</p>

<p>It is also important to note that the original bootstrap styles for <code>.modal-dialog</code> is not set for the default 992px breakpoint, only as high as the 768px breakpoint (which has a hard set width applied <code>width: 600px;</code>, hence why I overrode it w/ <code>width: auto;</code>.</p>

<pre><code>@media (min-width: $screen-sm-min) { // this is the 768px breakpoint
    .modal-dialog {
        max-width: 600px;
        width: auto;
    }
}

@media (min-width: $screen-md-min) { // this is the 992px breakpoint
    .modal-dialog { 
        max-width: 800px;
    }
}
</code></pre>

<p>Example below of modal being responsive with an image.</p>

<p><a href="https://i.stack.imgur.com/Tx1Pa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tx1Pa.jpg" alt="enter image description here"></a></p>


blocks|key|4619744|text|我也遇到了同样的问题，我找到了一个简单的方法来解决这个问题，那就是让模态的主体中的所有东西都能响应(使用引导类)，这样我的问题就解决了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4619745|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I had the same problem, and a easy way i found to solve that was to make everything in the modal's body responsive(using boostrap classes) and my problem were solved. </p>


blocks|key|4619749|text|默认情况下，Bootstrap通道应该是有响应的。需要注意的是，如果您在您的Modal上设置了宽度。例如，我在我的模型中有一个高度为40rem的表单主体容器。如果您将宽度更改为100%25，它将只占用所需的空间，并且它将再次响应。此示例引用内联样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4619750|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Bootstrap modals are supposed to be responsive by default. Something to look out for is if you have a width set on your Modal. For example I had a form body container inside of my modal with a height of 40rem. If you change the width to 100% it will only take up as much space as it needs to and it will be responsive again. This example refers to inline styling.</p>


<p>I have a modal but it's not resizing on smaller screens ( tablets, etc ). Is there a way to make it responsive ? Couldn't find any information on bootstrap docs. Thanks</p>

<p>I update my html code: ( its inside a django for loop )</p>

<pre><code>    &lt;div class="modal fade " id="{{ p.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &gt;
      &lt;div class="modal-dialog modal-lg"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title" id="myModalLabel"&gt;Producto&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;h5&gt;Nombre : {{ p.name}}&lt;/h5&gt;       
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cerrar&lt;/button&gt;

          &lt;/div&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>I have these css settings:</p>

<pre><code>.modal-lg {
  max-width: 900px;
}
@media (min-width: 768px) {
   .modal-lg {
    width: 100%;
  } 
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
</code></pre>


Bootstrap 3 modal responsive

响应式设计

容器

我有一个模式，但它不能在较小的屏幕(平板电脑等)上调整大小。有没有办法让它具有响应性？找不到有关引导程序文档的任何信息。谢谢我更新了我的html代码：(它在一个django for循环中)    <div class="modal fade " id="{{ p.id }}" tabindex="-1" role="d...

问Bootstrap 3模式响应
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3模式响应EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3模式响应
EN