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

qxsslcnc 于 2023-02-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(218)

我想让我的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>

但是产量是

twitter-bootstrap

来源：https://stackoverflow.com/questions/75508975/bootstrap-d-inline-flex-and-flex-row-reverse-combination-is-not-working

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-02-27

我来回答

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

1条答案

相关问题

热门标签

最新问答