我有一个部分必须包含左侧的图像和右侧的文本,而在下一个列中,我有相反的部分,我的意思是,左侧是文本,右侧是图像。这是我的 html:
<section>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
</div>
</div>
</section>
在桌面上,它看起来应该如此,但在移动设备上,顺序应该始终是先是图像,然后是文本。
怎么办?
最佳答案
您应该为此使用 flexbox order 实用程序类。 Flexbox Order Bootstrap
以全屏模式打开代码段。
在文本中添加order-2 order-md-1
,在图像中添加order-1 order-md-2
。
另外,为了让它工作,我必须用类 row
order-2 order-md-1
表示在最小的设备上,对元素进行排序 2,在中等设备上,然后进行排序 1
更新:您可以添加 align-items-center
到行以垂直居中元素
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 ">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6 ">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
关于css - 如何在 Bootstrap 4 中制作奇数/偶数列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52022532/