CSS：將兩個按鈕並排

引導側

<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的哪些規則我必須把解決它？

來源

2017-09-08 Lluís Puig Ferrer

是[這]（HTTPS ：//v4-alpha.getbootstrap.com/utilities/display-property/）有用嗎？ – Granny

通常是的，但在這種情況下沒有。我99％肯定這是因爲按鈕它是在一個窗體.. –

我不認爲這應該有所作爲。 – Granny

相當困難，幫助你只用你的小代碼，但這裏有一些解決方案，可以幫助

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

隨着顯示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>

來源

2017-09-08 08:01:37

你可以讓你的形式inline-block的。有輔助類在引導爲：class="visible-*-inline-block"

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

來源

2017-09-08 08:07:36

更簡單的方法來解決它，把這樣的代碼：

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

來源

2017-09-08 08:10:04

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

來源

2017-09-08 08:27:25

CSS：將兩個按鈕並排

回答

相關問題