Question

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

<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添加到链接中，如下所示：

<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类来对齐这两个按钮，这里是entiere解决方案：

<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中形成提交按钮

6 个答案: