如何修复使按钮重叠的表单答案

【问题标题】：How to fix the forms making the buttons overlap如何修复使按钮重叠的表单
【发布时间】：2019-12-22 17:29:53
【问题描述】：

我目前有这个代码：

<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 有没有办法解决它？感谢您的帮助！

【问题讨论】：

你能在sn-p中添加这个吗？我无法看到输出
密码？如果是这样，这里是：pastebin
你得到什么输出？
i.stack.imgur.com/xP6eu.png

标签： html css laravel laravel-blade

【解决方案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>

【讨论】：

它更好，但并不完全像我想要的那样：i.imgur.com/4P67UWU.png 我想要它在右边并且按钮是间隔的
刚刚看到d-inline-flex，现在它像我想要的一样在右边，但是按钮没有间隔
添加班级按钮mr-2
谢谢！使用表单上的 d-inline-flex 和按钮上的 mr-2，它就像一个魅力！

【解决方案2】：

<div>
      <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>
</div>
<div>
   <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>
</div>

<div>
   <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>
</div>

【讨论】：

【解决方案3】：

试试这个

<td class="text-right">
      <table>
        <tr>
           <td>
              <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>
           </td>
           <td>
              <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>
          </td>
          <td>
             <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>

【讨论】：