bootstrap btn group不工作

时间:2018-06-14 05:27:08

标签: html5 twitter-bootstrap

当我尝试class="btn-group"时,按钮不再连接。它们是分开的。

<div class="btn-group btn-group-xs">
    <form action="{{ route('requisitions.update'  , ['id' => $requisition->id]) }}" method="post">
        {{ method_field('PATCH') }}
        {{ csrf_field() }}
        <button type="submit" class="btn btn-success btn-xs">Confirmation</button>
    </form>
    <form action="{{ route('requisitions.destroy'  , ['id' => $requisition->id]) }}" method="post">
        {{ method_field('PATCH') }}
        {{ csrf_field() }}
        <button type="submit" class="btn btn-danger btn-xs">Disapproval</button>
    </form>
</div>

btn-group

1 个答案:

答案 0 :(得分:0)

You should follow the standard way as bootstrap
https://getbootstrap.com/docs/4.1/components/button-group/

 try to wrap this code some thing like this in a div having class "btn-toolbar"

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group btn-group-xs" role="group">
    <form method="post">

        <button type="submit" class="btn btn-success btn-xs">Confirmation</button>
    </form>
    <form method="post">

        <button type="submit" class="btn btn-danger btn-xs">Disapproval</button>
    </form>
</div>
    </div>

Example#2

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
</div>