Bootstrap 4 引导模式在移动设备中不可见_Bootstrap 4_Bootstrap Modal

Bootstrap 4 引导模式在移动设备中不可见

bootstrap-4

Bootstrap 4 引导模式在移动设备中不可见,bootstrap-4,bootstrap-modal,Bootstrap 4,Bootstrap Modal,Modal在桌面上工作得很好如果我在mobile中打开，modal将打开，但会在可见屏幕下方发出吼叫网址：更新正如我所观察到的，如果我减少模态内容中的元素，模态就会出现。请帮助解决此问题模态内容中的以下代码起作用 <form> <input class="main-input-box" type="text" name="My_Name" placeholde

Modal在桌面上工作得很好

如果我在mobile中打开，modal将打开，但会在可见屏幕下方发出吼叫

网址：

更新

正如我所观察到的，如果我减少模态内容中的元素，模态就会出现。请帮助解决此问题

模态内容中的以下代码起作用

     <form>               
   <input class="main-input-box" type="text" name="My_Name" placeholder="Your Name" />
                </form>

下面的内容（还有几个元素）显示在可见区域的下方

         <form>               
       <input class="main-input-box" type="text" name="My_email" placeholder="Your Email" />      
 <input class="main-input-box" type="text" name="My_Phone" placeholder="Your Phone" />
                    </form>

尝试此代码：我已在所有视图中检查此代码。它正在工作。请检查并让我知道，它是否为您工作。


引导示例

HI检查css代码，否则需要在移动视图中为模型编写自定义css

         <form>               
       <input class="main-input-box" type="text" name="My_email" placeholder="Your Email" />      
 <input class="main-input-box" type="text" name="My_Phone" placeholder="Your Phone" />
                    </form>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <a class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   <i class="fas fa-flag"></i> Enquiry
  </a>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title title-default-bold mb-none">Share</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
            <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
            <a class="a2a_button_facebook"></a>
            <a class="a2a_button_twitter"></a>
            <a class="a2a_button_email"></a>
            <a class="a2a_button_linkedin"></a>
            <a class="a2a_button_whatsapp"></a>
            <a class="a2a_button_pinterest"></a>
            <script async src="https://static.addtoany.com/menu/page.js"></script>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
</div>


</body>
</html>