Bootstrap 3模态响应 [英] Bootstrap 3 modal responsive

问题描述

我有一个模式，但它不会在较小的屏幕（平板电脑等）上调整大小。有没有办法让它响应？找不到关于bootstrap文档的任何信息。谢谢

我更新了我的html代码:(其内部是一个django for循环）

 < div class =modal fadeid ={{p.id}}tabindex = -  1role =dialogaria-labelledby =myModalLabelaria-hidden =true> ; 
< div class =modal-dialog modal-lg> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> 
< h4 class =modal-titleid =myModalLabel> Producto< / h4> 
< / div> 
< div class =modal-body> 
< h5> Nombre：{{p.name}}< / h5> 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal> Cerrar< / button> 
 
< / div> 
 
< / div> 
< / div> 
< / div> 
  

我有这个css设置：

  .modal-lg {
 max-width：900px;} 
 @media（min-width：768px）{
 .modal-lg {
宽度：100％; 
} 
} 
 @media（min-width：992px）{
 .modal-lg {
 width：900px; 
} 
} 
  

解决方案

I我已经解决了相同的问题，通过在Modals.less中为@ screen-xs-min减少版本添加媒体查询

  @media（max-width：@ screen-xs-min）{
 .modal-xs {width：@ modal-sm; } 
} 
  

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

I update my html code: ( its inside a django for loop )

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

          </div>

        </div>
      </div>
    </div>

I have this css settings:

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

解决方案

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

@media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
}

这篇关于Bootstrap 3模态响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！