html - CSS:并排放置两个按钮 Bootstrap

Question

我的代码如下所示:

<td>
   <a href="{{ route('admin.admins.show', $admin->id)}}" class="btn btn-info btn-sm">View</a>
   <form method="POST" action="{{route('admin.admins.destroy',$admin->id)}}" onsubmit="return ConfirmarBorrar()">
        <input type="submit" value="Delete" class="btn btn-danger btn-sm"style="float:left;">
        <input type="hidden" name="_token" value="{{Session::token()}}">
        {{method_field('DELETE')}}
   </form>
</td>

现在按钮看起来像这样:

我必须使用哪些 CSS 规则来修复它？

Answer 1

很难只用你的小代码来帮助你，但这里有一些可以帮助的解决方案

使用 flexbox :

    <td style="display: flex;">
       <a href="{{ route('admin.admins.show', $admin->id)}}" class="btn btn-info btn-sm">View</a>
       <form method="POST" action="{{route('admin.admins.destroy',$admin->id)}}" onsubmit="return ConfirmarBorrar()">
            <input type="submit" value="Delete" class="btn btn-danger btn-sm">
            <input type="hidden" name="_token" value="{{Session::token()}}">
            {{method_field('DELETE')}}
       </form>
    </td>

显示行内 block :

<td>
   <a href="{{ route('admin.admins.show', $admin->id)}}" class="btn btn-info btn-sm" style="display: inline-block;">View</a>
   <form method="POST" action="{{route('admin.admins.destroy',$admin->id)}}" onsubmit="return ConfirmarBorrar()" style="display: inline-block;">
        <input type="submit" value="Delete" class="btn btn-danger btn-sm">
        <input type="hidden" name="_token" value="{{Session::token()}}">
        {{method_field('DELETE')}}
   </form>
</td>

使用 Bootstrap 列:

<td>
  <div class="row">
    <div class="col-6">
      <a href="{{ route('admin.admins.show', $admin->id)}}" class="btn btn-info btn-sm">View</a>
    </div>
    <div class="col-6">
      <form method="POST" action="{{route('admin.admins.destroy',$admin->id)}}" onsubmit="return ConfirmarBorrar()">
        <input type="submit" value="Delete" class="btn btn-danger btn-sm">
        <input type="hidden" name="_token" value="{{Session::token()}}">
        {{method_field('DELETE')}}
      </form>
    </div>
  </div>
</td>