gpt4 book ai didi

html - 使用 Bootstrap 的响应式产品列表

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

我正在尝试为我正在制作的测试学习者网站的产品列表部分创建以下内容。

希望图像用于桌面,下部用于移动。

enter image description here

我尝试使用表格来让它工作,但我无法理解它(有人告诉我这可能有帮助)。我宁愿使用 bootstrap 来让它工作,但我不明白让不同的 Div 以我希望的方式移动和堆叠的最佳方式。如果有人可以提供帮助,那就太好了!

提前致谢。

最佳答案

试试这个:

<div class="row">
<div class="col-xs-4 col-sm-3">Div 1</div>
<div class="col-xs-6 col-sm-3">
<div class="row">
<div class="col-xs-12">Div 2</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-12">Div 3</div>
<div class="col-xs-6 visible-xs">Div 4</div>
</div>
</div>
<div class="col-sm-3 hidden-xs">Div 4</div>
</div>

关于html - 使用 Bootstrap 的响应式产品列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46720099/

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