html - 如何修复使按钮重叠的表单

Question

我目前有这段代码:

<div class="table-responsive">
                <table class="table align-items-center table-flush">
                    <thead class="thead-light">
                        <tr>
                            <th>@lang('strings.id')</th>
                            <th>@lang('strings.name')</th>
                            <th class="text-center">Created at</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($backups as $backup)
                        <tr>
                            <td><code>{{ $backup->uuidShort }}</code></td>
                            <td>{{ $backup->name }}</td>
                            <td class="text-center">{{ $backup->created_at->diffForHumans() }}</td>
                            <td class="text-right">
                                <form action="{{ route('server.backupmanager.download', ['server' => $server->uuidShort, 'backup' => $backup->uuid]) }}" method="POST">
                                    {!! csrf_field() !!}
                                    <button type="submit" class="btn btn-sm btn-success">@lang('strings.download')</button>
                                </form>
                                <form action="{{ route('server.backupmanager.deploy', ['server' => $server->uuidShort, 'backup' => $backup->uuid]) }}" method="POST">
                                    {!! csrf_field() !!}
                                    <button type="submit" class="btn btn-sm btn-info">@lang('strings.deploy')</button>
                                </form>
                                <form action="{{ route('server.backupmanager.delete', ['server' => $server->uuidShort, 'backup' => $backup->uuid]) }}" method="POST">
                                    {!! csrf_field() !!}
                                    <button type="submit" class="btn btn-sm btn-danger">@lang('strings.delete')</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

除了按钮重叠外，它工作得很好: image有办法解决吗？感谢您的帮助!

Answer 1

尝试用 <div class="d-flex">[forms here]</div> 包裹你的表格或 d-inline-flex类

<div class="d-inline-flex">
  <form class="mr-2">
    <button type="submit" class="btn btn-sm btn-success">Button</button>
  </form>
  <form class="mr-2">
    <button type="submit" class="btn btn-sm btn-success">Button</button>
  </form>
  <form>
    <button type="submit" class="btn btn-sm btn-success">Button</button>
  </form>
</div>