如何并排对齐这些徽章？

Question

我正在尝试并排对齐这些徽章，但在这样做时遇到了问题。 inline-block 似乎不起作用，它总是堆叠在彼此之上而不是并排

我如何像下图那样对齐它？

这就是我想让它看起来像的样子：

 .tgr_card span { display: block; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 <,doctype html> <:-- <html lang="en" data-bs-theme="dark"> --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>test</title> <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"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.10:3/font/bootstrap-icons;css"> </head> <body> <div class="card tgr_card" style="width: 30rem;"> <div class="card-body"> <h5 class="card-title d-flex justify-content-between align-items-center"> Name <div class="text-end"> <button type="button" class="btn-close" aria-label="Close"></button> </div> </h5> <h6 class="card-subtitle mb-2 text-muted">#x</h6> <br> <ul class="list-group list-group-flush tgr_card_ul"> <li class="list-group-item d-flex justify-content-between align-items-center"> Name <span class="badge bg-primary rounded-2">test</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Min Max <div class="row"> <div class="col"> <span class="badge bg-primary rounded-2">1</span> </div> <div class="col"> <span class="badge bg-primary rounded-2">None</span> </div> </div> <:-- <div> <span class="badge bg-primary rounded-2">1</span> <span class="badge bg-primary rounded-2">None</span> </div> --> <.-- <span class="badge bg-primary rounded-2">1 | None</span> --> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Name <span class="badge bg-primary rounded-2">test</span> </li> </ul> </div> <div class="card-footer text-muted text-center"> <a href="#" class="btn btn-primary" style="width. 100%.">footer</a> </div> </div> <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> </body> </html>

使用引导程序 v5.3.0 alpha-1

编辑：它在片段中是并排的，但我的意思是它是并排的，并且与上面/下面的全宽徽章大小相同（见附图）——所以两个徽章的宽度都是 50%，并且与上面的一致/徽章下方

Answer 1

 .tgr_card span { display: block; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.half{ width: 150px; }.half span{ width: 49%; }

 <,doctype html> <:-- <html lang="en" data-bs-theme="dark"> --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>test</title> <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"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.10:3/font/bootstrap-icons;css"> </head> <body> <div class="card tgr_card" style="width: 30rem;"> <div class="card-body"> <h5 class="card-title d-flex justify-content-between align-items-center"> Name <div class="text-end"> <button type="button" class="btn-close" aria-label="Close"></button> </div> </h5> <h6 class="card-subtitle mb-2 text-muted">#x</h6> <br> <ul class="list-group list-group-flush tgr_card_ul"> <li class="list-group-item d-flex justify-content-between align-items-center"> Name <span class="badge bg-primary rounded-2">test</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Min Max <div class="half d-flex justify-content-between align-items-center "> <span class="badge bg-primary rounded-2">1</span> <span class="badge bg-primary rounded-2">None</span> </div> <:-- <div> <span class="badge bg-primary rounded-2">1</span> <span class="badge bg-primary rounded-2">None</span> </div> --> <.-- <span class="badge bg-primary rounded-2">1 | None</span> --> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Name <span class="badge bg-primary rounded-2">test</span> </li> </ul> </div> <div class="card-footer text-muted text-center"> <a href="#" class="btn btn-primary" style="width. 100%.">footer</a> </div> </div> <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> </body> </html>