bootstrap 将按钮与 td 中的表单提交按钮对齐

Question

我在我的 Symfony 应用程序和索引操作中使用 bootstrap，我显示一个 table，其中包含所有项目和两个用于更新或删除项目的按钮。事实上我没有使用按钮我使用一个按钮来修改实体和一个带有隐藏输入的表单和提交按钮来删除这个项目。目前提交按钮显示在更新按钮下方，我想要的是显示对齐的两个按钮。如果您能解决我的问题，请提前致谢这是我的代码：

<td>
    <a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary">Modifier</a>
    <form action="/app_dev.php/quotes/2/delete">
        <input type="hidden" name="_method" value="DELETE">
        <button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
    </form>
</td>

Answer 1

您可以通过多种方式实现这一目标。一种简单的形式是将 float: left 添加到 link，如下所示：

<td>
    <a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary" style="float: left">Modifier</a>
    <form action="/app_dev.php/quotes/2/delete" >
        <input type="hidden" name="_method" value="DELETE">
        <button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
    </form>
</td>

Answer 2

首先我不明白你为什么要使用表格。您可以使用 onClick 事件的参数轻松调用所需的 URL。但如果有必要，您仍然可以添加一个属性到表单中，它的元素是 style="display:inline-block;" 或者可以写一个单独的 css.

form {
  display:inline-block;
}

Answer 3

<td class="flex">
    <a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary">Modifier</a>
    <form action="/app_dev.php/quotes/2/delete">
        <input type="hidden" name="_method" value="DELETE">
        <button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
    </form>
</td>

在你的 css 中：

.flex {
display: flex;
}

使用 flex https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox（法语）显示的良好来源

Answer 4

this will be helpful

<style>
.div1, .div2{
  display: inline-block;
}


</style>

 <body>


<td>

    <div class="div1"><a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary">Modifier</a></div>
      <div class="div2"><form action="/app_dev.php/quotes/2/delete">
        <input type="hidden" name="_method" value="DELETE">
        <button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
    </form></div>
</td>
</body>

Answer 5

HTML

<td class="button-container">
    <a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary">Modifier</a>
    <form action="/app_dev.php/quotes/2/delete">
        <input type="hidden" name="_method" value="DELETE">
        <button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
    </form>
</td>

CSS

.button-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

此外，您可以将按钮设置为 100%

.button-container .btn {
  width: 100%;
}

Answer 6

好的，谢谢大家的回答，我发现使用 bootstrap flex 类来对齐这两个按钮，这里是完整的解决方案：

<td class="d-flex flex-row">
    <a href="{{ path('wallofquotes_quote_update', {'id': quote.id}) }}" class="btn btn-sm btn-primary mr-1">{{ 'wallofquotes.ui.update'|trans }}</a>
    <form method="POST" action="{{ path('wallofquotes_quote_delete', {'id': quote.id}) }}">
        <input type="hidden" name="_method" value="DELETE">
        <button type="submit" class="btn btn-sm btn-danger">{{ 'wallofquotes.ui.delete'|trans }}</button>
    </form>
</td>

bootstrap 将按钮与 td 中的表单提交按钮对齐

bootstrap align button to form submit button in td

html

symfony

bootstrap-4

twitter-bootstrap-4