如何将对齐的按钮与下面的分隔线对齐？

Question

我想得到这个：

目前，按钮没有像水平条那样对齐。

我想正确放置此按钮并避免间距。

如果您在 bootstrap 4 或 bootstrap 5 中有解决方案，我很感兴趣。

非常感谢您的帮助

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

<body>
  <div class="home-content container pt-5">
    <div class="breadcrumb d-flex justify-content-between">
      <h2 class="ms-2">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
      <button type="button mr-5" (click)="goBack()" class="btn btn-primary">Retour</button>
    </div>
    <div class="separator-breadcrumb border-top ms-2 pt-3" style="width: 97%"></div>

    <div class="row pt-3 container">
      <div class="card" style="width: 100%;">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <table class="table table-hover table-striped" style="width: 150%;">
                <tbody>
                  <tr>
                    <th>Ticker</th>
                    <td>SOLB</td>
                  </tr>
                  <tr>
                    <th>Code SVM</th>
                    <td>347075</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div class="col">
              <div class="btn-group-vertical float-end" style="width: 45%">
                <button type="button" class="btn btn-primary mb-2">
                    Best Execution
                  </button>
                <button type="button" class="btn btn-primary mb-2">
                    Etat du marché
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 1

这不一定与Bootstrap有关。

你是在暗示 width: 97% 到 .separator-breadcrumb，所以它没有使用所有可用的 space。

为了修复它，替换行：

<div class="separator-breadcrumb border-top ms-2 pt-3" style="width: 97%"></div>

与：

<div class="separator-breadcrumb border-top ms-2 pt-3"></div>

Answer 2

大多数情况下，您需要回到基础，让 Bootstrap 布局网格系统发挥作用。你太努力了，无法用边距等来解决问题。这是一个成熟的系统，几乎可以为你完成所有工作。 定期查看 grid docs，以便您对它的工作原理有一个全新的了解。请注意，您不需要嵌套容器。

养成使用浏览器的开发人员工具检查您的布局的习惯，看看是什么在推动事情发生，然后根据需要删除或抵消它。不过，这应该是一件罕见的事情。如果间距看起来很奇怪，您可能偏离了标准结构，因此请查看文档。

不要使用内联样式。 这对所有相关人员来说都是一种痛苦。如果您确实需要自定义样式（首先搜索 Bootstrap 文档），请在内联样式元素或外部样式表中使用自定义 CSS class。它更干净，更容易使用。在可能的情况下，请遵循 Bootstrap 的命名约定以熟悉，就像我在此处为 width sizing 所做的那样。

特定宽度通常被认为是最后的手段。 最好让内容自然流动。考虑从按钮容器中删除 45% 的宽度，让 table 填满所有可用的 space。如果您愿意，可以使用边距 class 来增加间距。

然后，您有 border classes 可用，因此您不需要为分隔线添加额外的标记。

我已经缩短了您的标题，因此它更适合这个演示。

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

  <style>
    .w-45 { /* class name follows Bootstrap's convention */
      width: 45%;
    }
  </style>
</head>

<body>
  <div class="home-content container pt-5">
    <div class="breadcrumb d-flex justify-content-between border-bottom pb-4">
      <h2>Signalétique de SOLVAY...</h2>
      <button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
    </div>

    <div class="p-0 pt-3">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <table class="table table-hover table-striped">
                <tbody>
                  <tr>
                    <th>Ticker</th>
                    <td>SOLB</td>
                  </tr>
                  <tr>
                    <th>Code SVM</th>
                    <td>347075</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="col">
              <div class="btn-group-vertical float-end w-45">
                <button type="button" class="btn btn-primary mb-2">
                    Best Execution
                  </button>
                <button type="button" class="btn btn-primary mb-2">
                    Etat du marché
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

如何将对齐的按钮与下面的分隔线对齐？

How can I align a justified button with the divider line below?

bootstrap-4