gpt4 book ai didi

javascript - Bootstrap Grid 将内容调整到页面上的新位置

转载 作者:太空宇宙 更新时间:2023-11-04 11:16:22 25 4
gpt4 key购买 nike

我是 boot strap 的新手,所以我可能以错误的方式思考这个目标,所以我将不胜感激任何建议和解决方案。

比如说我有一个左栏

<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 中是如何完成的。是不是只能复制“Some Data 0”,只根据屏幕断点显示和隐藏?

谢谢

最佳答案

好吧,我想你可以通过这种方式实现它:

<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-{} 类。

关于javascript - Bootstrap Grid 将内容调整到页面上的新位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33172941/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com