Bootstrap 3.3.1: Btn group with RESTful delete and fix buttons not connecting smoothly

When using Laravel and twitter bootstrap 3.3.1, I want to create a button group consisting of two seamlessly linked buttons that look like this: [Edit | Delete]

Due to RESTful APIs etc. I wanted to use routes based at least on DELETE call. So I need to put POST or PATCH and DELETE buttons together. Using blade syntax and shape builder, it looks like this:

<div class="btn-group btn-group-xs" role="group">
  <div class="btn-group btn-group-xs" role="group">
       <a href="{{route('routeTo.edit', $param)}}" type="submit" class="btn btn-warning">
          <span class="glyphicon glyphicon-pencil"></span>
       </a>
       {!! Form::open(array('route' => array('routeTo.delete', $param), 'method' =>
                        'delete', 'class' => 'btn-group')) !!}
          <button type="submit" class="btn btn-mini btn-danger">
          <span class="glyphicon glyphicon-trash"></span>
                        </button>
       {!! Form::close() !!}
 </div>
</div>

      

But what appears is not a seamlessly connected button group, but a separate one that also has an interrupt line.

Also this thread ( Why Twitter Bootstrap 2 btn-group doesn't work? ) Tries to solve the problem in an earlier version, but their solution is also not “I work for me.

Any thoughts and ideas on how to combine POSTS and shapes in a button group? Thank!

+3


source to share


1 answer


btn-group

it requires the children to btn

be siblings, so all you have to do is:

{!! Form::open(array('route' => array('class' => 'btn-group', 'routeTo.delete',$param), 'method' =>'delete')) !!}
    <div class="btn-group btn-group-xs" role="group">
        <a href="{{route('routeTo.edit', $param)}}" class="btn btn-warning">
            <span class="glyphicon glyphicon-pencil"></span>
        </a>

        <button type="submit" class="btn btn-mini btn-danger">
            <span class="glyphicon glyphicon-trash"></span>
        </button>

    </div>
{!! Form::close() !!}

      



Also, the attribute type

on the anchor is completely different from the type on the enter button /.

Hope this helps!

+1


source







All Articles