Bootstrap 引导:d-inline-flex和flex-row-reverse组合不起作用

qxsslcnc  于 2023-02-27  发布在  Bootstrap
关注(0)|答案(1)|浏览(206)

我想让我的html看起来像下面。

<p>Use .flex-row-reverse to right-align the direction:</p>
  <div class="d-inline-flex flex-row-reverse bg-secondary">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>

但是产量是

hl0ma9xz

hl0ma9xz1#

您需要设置width,否则输出将与设置width: auto;相同。
请参见下面的片段。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<p>Use .flex-row-reverse to right-align the direction:</p>
<div class="d-inline-flex flex-row-reverse w-100">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

相关问题