时间戳

首页 > 解决方案 > 手机上的引导模式宽度打开到小（宽度）

bootstrap-4 - 手机上的引导模式宽度打开到小（宽度）

问题描述

我正在处理一个使用 Bootstrap 4 并使用模式窗口显示一些信息的页面。它在台式机/笔记本电脑/平板电脑上运行良好，但是当我在手机上对其进行测试时，模式会打开，但宽度非常窄。在手机上显示时，我应该考虑增加模态的宽度吗？

模态代码示例

<div class="modal fade" id="workwith">
  <div class="modal-dialog modal-lg">
    <div class="modal-content"> 
      
      <!-- Modal Header -->
      <div class="modal-header">
    <h4 class="modal-title">WTitle</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      
      <!-- Modal body -->
      <div class="modal-body">
    <ul>
      <li class="li-item"><a href="https://xxxx" target="_blank">xxxx</a></li>
      <li class="li-item"><a href="https://xxxx" target="_blank">xxxx</a></li>
    </ul>
    
    <div class="pic_frame_right">
    <img src="img/pics/three_pis2.png"> </div>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
    <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

引导导航

<nav class="navbar navbar-dark bg-dark navbar-expand-sm sticky-top"> 

   <button class="navbar-toggler"  data-toggle="collapse" data-target="#menu1">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu1"> 
    <!-- Links -->
    <ul class="navbar-nav nav-fill w-100">
      <li class="nav-item"> <a class="nav-link" data-toggle="modal" data-target="#workwith">Facilities</a> </li>
    </ul>
    </div>
</nav>

标签： bootstrap-4

解决方案

刚刚找到原因，我将 css modal-lg 设置为 max-width=60%

推荐阅读