将按钮组与表单结合起来 - Bootstrap 3答案

【问题标题】：Combine button group with forms - Bootstrap 3将按钮组与表单结合起来 - Bootstrap 3
【发布时间】：2016-07-16 00:15:17
【问题描述】：

我正在尝试使用 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 可以吗？谢谢！

【问题讨论】：

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

【解决方案1】：

我不确定如何编写代码，但这在数据表列中对我有用：

<div class="btn-group btn-group-sm">
<?php echo form_open('edit_files', 'class="btn-group"');?>
    <button type="submit" class="btn btn-primary" name="id">Edit</button>
</form>
<?php echo form_open('view_files', 'class="btn-group"');?>
    <button type="submit" class="btn btn-success" name="id">View</button>
</form>

【讨论】：

【解决方案2】：

以下链接有一个适合您的有效解决方案

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 一起工作，不知道为什么。

【讨论】：

不要只发布链接...也发布相关代码。
嗨 @imvain2 你把我发回了我的链接？