将按钮组与表单组合 - Bootstrap 3

时间:2016-03-28 17:24:52

标签: javascript jquery html twitter-bootstrap twitter-bootstrap-3

我正在尝试使用Bootstrap 3和Laravel 5.2合并到按钮组2个表单和页面重定向中。

我无法正确格式化按钮,主要是因为其中两个被"形式包裹"元件。

我的HTML如下:

<div class="btn-group pull-left">
    <a class="btn btn-primary btn-sm" href="{!! route('client.create') !!}">
        <i class="ion-plus"></i>&nbsp;&nbsp;New
    </a>

    {!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
       <input name="visibility" class="hidden" value="true">
       <button type="submit" class="btn btn-primary btn-sm">
           <i class="ion-ios-eye"></i>&nbsp;&nbsp;Visible
       </button>
    {!! Form::close() !!}

    {!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
       <input name="visibility" class="hidden" value="false">
       <button type="submit" class="btn btn-primary btn-sm">
           <i class="ion-ios-locked"></i>&nbsp;&nbsp;Hidden
       </button>
    {!! Form::close() !!}
</div>

这可以不使用jQuery吗?谢谢!

2 个答案:

答案 0 :(得分:1)

以下链接有一个适合你的工作解决方案

How to group buttons in different forms tags in Bootstrap

创建多个BTN表单组

http://jsfiddle.net/isherwood/TRjEp/

<br />
<form class="btn-group">
    <button class="btn">Button One</button>
    <input type="hidden" class="btn" />
</form>
<form class="btn-group inline">
    <input type="hidden" class="btn" />
    <button class="btn">Button Two</button>
</form>
<form class="btn-group inline">
    <input type="hidden" class="btn" />
    <button class="btn">Button Three</button>
</form>

其他CSS:

.btn-group+.btn-group {
    margin-left: -5px;
}

该代码似乎适用于HIDDEN Btn,不知道为什么。

答案 1 :(得分:0)

我不确定如何编码,但是在datatables列中这对我有用:

Among other public buildings in a certain town, which for many reason it will be prudent to
refine from mentioning, and to which i will assign no fictitious name, there is one anciently
common to most towns, great or small.