Bootstrap 在较小的设备上显示模态内容

Question

我一直在网上搜索这个，但很遗憾，我找不到任何东西，希望你能帮助我。

我正在使用模态在我的页面上显示详细信息，但在移动设备上，我想显示内容本身，而不是模态，我想避免重复内容和代码。 是否有任何设置或方法可以允许这种不同的处理？

抱歉，这可能是一个非常简单的问题，但由于移动设备上的模式问题，似乎几乎不可能找到与该主题相关的任何内容。

我使用的是绝对标准的引导模式设置。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

基本上，我想在小型设备上将所有带有 div modal-content 的内容显示为普通的 div 列。

非常感谢您的帮助。

非常感谢和最好的问候， 西蒙

Answer 1

如果你想在不同的屏幕尺寸上显示不同的内容，我建议你看看 bootstrap 的display property，你可以在某些分辨率下隐藏/显示某些元素。

因此（例如，使用sm 作为断点）：

<!-- Shows on xs and sm -->
<div class="d-block d-sm-none">
  <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" 
              aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        Things inside your modal
      </div>
    </div>
  </div>
</div>
<!-- Shows on screens larger than sm -->
<div class="d-none d-sm-block">
  Stuff whichever things that you want to include
</div>

我想避免重复内容和代码。

因此，这部分可以将一个模板包含到另一个模板中，请查看other questions，这可能有助于减少您的代码。

如果您有其他问题，请在下方评论。