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

Question

我一直在搜索互联网，但是很遗憾，我什么都找不到，希望您能为此提供帮助。

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

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

我正在使用绝对标准的Bootstrap Modal设置。

<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模态内容的内容显示为常规div列。

非常感谢您的帮助。

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

Answer 1

如果您想在不同的屏幕尺寸上使用不同的内容，我建议您看一下引导程序的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，它们可能会为减少代码提供帮助。

如果有其他问题，请在下面发表评论。