根据屏幕大小将引导模式更改为静态 div

Question

我正在开发一个类似应用程序的单页网站，该网站有一个用户可以单击的项目列表，以获取有关该项目的更多信息。 在移动版本上，我希望此信息以模式形式弹出，但在桌面（大屏幕）版本上，我希望信息填充内容区域的中心/右侧部分。

我已经考虑了一些事情，但它们似乎都有些笨拙：使用 @media 和 screen 去除（清零）或添加模态和 div 样式，使用 javascript 根据屏幕大小删除/添加模态类。 当它们工作时，我想知道是否有一种方法可以用 CSS 干净利落地做到这一点，以便其他部分的 javascript 正常运行，而无需在更新 div（或触发模式）之前检查屏幕大小。

Answer 1

尝试使用此代码。
这是jsfiddle链接

 .modal, .modal-backdrop { position: static; } .modal-backdrop.show { opacity: 0; } .modal-dialog { margin-left: auto; margin-right: 20px; } @media (max-width: 767px) { .modal, .modal-backdrop { position: fixed; } .modal-backdrop.show { opacity: 0.5; } .modal-dialog { margin: 0 auto; } }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <div class="container"> <!-- Button trigger modal --> <div class="modal-container"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div>