在 Web 中从右到左显示内容(HTML 和 CSS)

Question

我想从右到左显示我网站中的内容，我正在尝试从引导使用 Flex 但仍然不起作用，像 jquery 这样的 JavaScript 库是否需要从右到左显示内容？

这就是我想要的外观 在此处输入图像描述

这是我的网络外观 在此处输入图像描述

这是 MyHTML

<div class="container">
@foreach ($books as $book)
<div class="d-flex justify-content-center " style="width:150px; direction:rtl">
<div class="card bg-info mb-3" style="width: 18rem;">
<img src="{{ asset("img/books/$book->gambar") }}" width="150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ $book->judul }}</h5>
<a href="#" class="btn btn-primary" >detail</a>
</div>
</div>
</div>
@endforeach

Answer 1

Bootstrap 有一个.flex-row-reverse类，可用于更改弹性行的方向。所以你应该能够做这样的事情：

<div class="container">
<div class="d-flex flex-row-reverse">
@foreach ($books as $book)
<div class="justify-content-center" style="width:150px; direction:rtl">
<div class="card bg-info mb-3" style="width: 18rem;">
<img src="{{ asset('img/books/$book->gambar') }}" width="150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ $book->judul }}</h5>
<a href="#" class="btn btn-primary" >detail</a>
</div>
</div>
</div>
@endforeach
</div>
</div>