Question

我是初学者，所以我可能会以不正确的方式考虑这个目标，所以我很感激任何建议和解决方案。

比方说我有一个左列

<div class="row">
    <div class="col-md-3 col-xs-6">Some Data 0</div>
    <div class="col-md-3 col-xs-6">Some Data 1</div>
    <div class="col-md-3 col-xs-6">Some Data 2</div>
</div>

当屏幕与XS匹配时，我希望将“Some Data 0”包装在模态组件中。因此，“Some Data 0”现在隐藏在一个模态窗口中，并且一个按钮位于其中，当单击时将显示带有“Some Data 0”内容的模态窗口

如何在Bootstrap中完成。是唯一的方法来复制“一些数据0”，只是根据屏幕断点显示和隐藏？

由于

Answer 1

嗯，你可以用这种方式实现它我想：

<div class="row">
    <div class="col-md-3 hidden-xs">Some Data 0</div>
    <div class="col-xs-12 hidden-md visible-xs"> Handle your modal with Some Data 0 in this div</div>

    <div class="col-md-3 hidden-xs">Some Data 1</div>
    <div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 1 in this div</div>

    <div class="col-md-3 hidden-xs">Some Data 2</div>
    <div class="col-xs-12 hidden-md visible-xs">Handle your modal with Some Data 2 in this div</div>
</div>

此处的主要功能是使用hidden-{}和visible-{}类。

Bootstrap Grid将内容重新调整为页面上的新位置

1 个答案: