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>

使用display inline-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>

使用引导列：

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

Answer 2

您可以将表单设为内联块。有辅助课程 Bootstrap：class="visible-*-inline-block"

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<td>
   <a href="{{ route('admin.admins.show', $admin->id)}}" class="btn btn-info btn-sm d-inline-block">View</a>
   <form class="visible-xs-inline-block" 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>

＆＃13;

Answer 3

更容易修复它，把代码放到这样：

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

Answer 4

<!DOCTYPE html>
<html>
  <head>
  <style>
  body {
    display: inline-flex;
  }
  </style>
  </head>
  <body>
    <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>
  </body>
</html>

CSS：并排放置两个按钮引导程序

4 个答案: