如何将两个表单内联在一起答案

【问题标题】：How to place two forms together inline如何将两个表单内联在一起
【发布时间】：2021-06-11 13:20:51
【问题描述】：

我正在使用 Bootstrap 来布局我的项目，基本上我有两个 div 像这样：

<div>
    <form action="{{ route('destroy.question', $post->id) }}" method="POST">
        @csrf
        @method('DELETE')
        <button class="btn">
        Delete
        </button>
    </form>
    <form action="{{ route('edit.question', $post->id) }}">
        <button class="btn">
        Edit 
        </button>
    </form>
    <a href="" class="btn btn-primary">
    Discussion
    </a>
</div>

这是这张照片：

所以我需要将这个div 内联，因此两个表单和链接都放在一行中。

我尝试添加class="row" 和class="form-inline"，但没有解决！

如果你知道怎么做，请告诉我，我将非常感激，

谢谢。

【问题讨论】：

为每个form 和a 添加d-inline-block 类，或为div 添加d-flex 类。
为了将来参考，只添加与当前问题相关的标签。我为您删除了 PHP 标记，因为这是一个纯 html/css 问题。
@s.kuznetsov Bootstrap 3 不支持 flexbox，因此它取决于 OP 使用的版本。如果 4+ 则您的建议有效，但低于此值则无效。
@Ajay，是的，但是 OP 没有指定版本引导程序，所以我给出了一个通用的答案。 d-inline-block 在版本 3 上工作。
@s.kuznetsov 这很有趣。我很确定 v3.x 中不存在 d- 属性。这些是在 v4 中引入的

标签： html css forms twitter-bootstrap

【解决方案1】：

只需添加

.inline { display: inline }

用<form class=“inline”替换你的<form并对锚标签做同样的事情

——————

另外，使用 flexbox 的更好方法是

.inline { display: flex }

用<div class=“inline”替换你的<div

【讨论】：