Bootstrap 5 卡根据内部元素的存在更改顺序 [关闭]-解网

问：

这个问题是由错别字或无法再现的问题引起的。虽然类似的问题可能在这里是主题，但这个问题的解决方式不太可能帮助未来的读者。

6天前关闭。

改进此问题

有点奇怪的行为，我在 bootstrap 5 文档中找不到解释。

如果你从这里拿他们的示例卡

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <a href="/">
    <div class="card mb-3" style="max-width: 540px;">
      <div class="row no-gutters">
        <div class="col-md-4">
          <img src="https://via.placeholder.com/300x100" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">

            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>

    </div>
  </a>
</body>

只需在它周围添加一个链接元素，它就可以正常工作 - 显示您期望的内容：

但是，如果我们采用完全相同的代码并在 card-body div 中添加一个 a 元素（在哪里并不重要 - 这里我把它放在正文的末尾）：

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <a href="/">
    <div class="card mb-3" style="max-width: 540px;">
      <div class="row no-gutters">
        <div class="col-md-4">
          <img src="https://via.placeholder.com/300x100" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">

            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <a></a>
          </div>
        </div>
      </div>

    </div>
  </a>
</body>

显示顺序发生了巨大变化，从而破坏了应用程序：

想知道有人会对此进行解释以及我如何解决它的想法吗？

HTML CSS twitter-bootstrap 引导-5

Bootstrap 5 卡根据内部元素的存在更改顺序 [关闭]

Bootstrap 5 card changes order depending on presence of inner elements [closed]

评论