我這樣從php端顯示元素:
<?php foreach ($cases as $case) { ?> <div class="case"> <div class="row"> <div class="col-6"> <img src="<?= $case->getImageUrl() ?>"> </div> <div class="col-6"> <div class="text"><?= $case->text ?></div> </div> </div> </div> <?php } ?>
在html頁面上它們看起來像這樣
.case { padding: 50px; } img { width: 300px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="case"> <div class="row"> <div class="col-6"> <img src="https://i.imgur.com/JMHHMVl.jpg"> </div> <div class="col-6"> <div class="text">case 1</div> </div> </div> </div> <div class="case"> <div class="row"> <div class="col-6"> <img src="https://i.imgur.com/m3cq9ez.jpg"> </div> <div class="col-6"> <div class="text">case 2</div> </div> </div> </div> <div class="case"> <div class="row"> <div class="col-6"> <img src="https://i.imgur.com/IKXSAiw.jpg"> </div> <div class="col-6"> <div class="text">case 3</div> </div> </div> </div>
是否可以使col-6
交替交換,使頁面上的元素以棋盤格的形式顯示,像這樣
.case { padding: 50px; } img { width: 300px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="case"> <div class="row"> <div class="col-6"> <img src="https://i.imgur.com/JMHHMVl.jpg"> </div> <div class="col-6"> <div class="text">case 1</div> </div> </div> </div> <div class="case"> <div class="row"> <div class="col-6"> <div class="text">case 2</div> </div> <div class="col-6"> <img src="https://i.imgur.com/m3cq9ez.jpg"> </div> </div> </div> <div class="case"> <div class="row"> <div class="col-6"> <img src="https://i.imgur.com/IKXSAiw.jpg"> </div> <div class="col-6"> <div class="text">case 3</div> </div> </div> </div>
P粉2040797432023-09-15 09:10:35
自從bootstrap切換到display: flex
,就可以使用純現代CSS來實現這樣的效果:
.case:nth-of-type(2n) .row{ flex-direction: row-reverse; }
不需要對HTML進行任何更改。