如何为响应式视图打破按钮或锚标记

Question

<td>
@if($product->status)
<div class="form-group has-error" style="word-wrap:break-word;">
<label class="control-label">No</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-success" href="{{ route('myproducts.toggleStatus',$product->id) }}"><em class="fa fa-thumbs-o-up"></em> Make it Available</a>
</div>

@else
<div class="form-group has-success" style="word-wrap:break-word;">
<label class="control-label">Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-danger" style="word-wrap:break-word;" href="{{ route('myproducts.toggleStatus',$product->id) }}"><em class="fa fa-thumbs-o-down"></em> Make it Unavailable</a>
</div>
@endif
</td>

This is the code that I have used and I am attaching screenshots of mobile the last part that goes out of view

Answer 1

You should add responsive class to table element so that scroll will be displayed on smaller devices.

Check bootstrap responsive tables.