将网格布局重新排序为 2 列
Reordering grid layout into 2 columns
我有以下 div 移动布局:
<div class="row">
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/000/fff&text=1" alt="" class="w-100" />
</div>
<div class="col-md-4">
<img src="https://dummyimage.com/400x800/111/fff&text=2" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/222/fff&text=3" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/333/fff&text=4" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x300/444/fff&text=5" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/555/fff&text=6" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x200/666/fff&text=7" alt="" class="w-100" />
</div>
<div class="col-md-4">
<img src="https://dummyimage.com/400x800/777/fff&text=8" alt="" class="w-100" />
</div>
</div>
当我遇到中间断点时,我想实现以下布局:
我怎样才能做到这一点?
执行此操作的唯一方法是使用 d-md-block
和 float 实用程序在 md 上禁用 flex...
<div class="container">
<div class="row d-md-block">
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/000/fff&text=1" alt="1" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/111/fff&text=2" alt="2" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/222/fff&text=3" alt="3" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/333/fff&text=4" alt="4" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x300/444/fff&text=5" alt="5" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/555/fff&text=6" alt="6" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x200/666/fff&text=7" alt="7" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/777/fff&text=8" alt="8" class="w-100" />
</div>
</div>
</div>
我有以下 div 移动布局:
<div class="row">
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/000/fff&text=1" alt="" class="w-100" />
</div>
<div class="col-md-4">
<img src="https://dummyimage.com/400x800/111/fff&text=2" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/222/fff&text=3" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/333/fff&text=4" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x300/444/fff&text=5" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x100/555/fff&text=6" alt="" class="w-100" />
</div>
<div class="col-md-8">
<img src="https://dummyimage.com/400x200/666/fff&text=7" alt="" class="w-100" />
</div>
<div class="col-md-4">
<img src="https://dummyimage.com/400x800/777/fff&text=8" alt="" class="w-100" />
</div>
</div>
当我遇到中间断点时,我想实现以下布局:
我怎样才能做到这一点?
执行此操作的唯一方法是使用 d-md-block
和 float 实用程序在 md 上禁用 flex...
<div class="container">
<div class="row d-md-block">
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/000/fff&text=1" alt="1" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/111/fff&text=2" alt="2" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/222/fff&text=3" alt="3" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/333/fff&text=4" alt="4" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x300/444/fff&text=5" alt="5" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/555/fff&text=6" alt="6" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x200/666/fff&text=7" alt="7" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/777/fff&text=8" alt="8" class="w-100" />
</div>
</div>
</div>