如何在输入表单附近添加按钮答案

【问题标题】：how to add a button near a input form如何在输入表单附近添加按钮
【发布时间】：2016-05-01 19:45:11
【问题描述】：

我正在使用fluentbootstrap，我正在尝试在我的表单输入附近添加一个按钮（带图标）。

代码：

using (var form = Html.Bootstrap().Form().SetHorizontal().Begin())
{
    @form.InputFor(m => m.Id).SetReadonly().SetLg(3)
    @form.SelectFor(m => m.CountryId, Model.CountryList).SetLg(3)
    @form.InputFor(m => m.Name).SetLg(3)
    @Html.Bootstrap().Button().SetIcon(Icon.Film)
}

第三行（带有字段名称）的结果是控件标签 + 同一行中的输入，但按钮位于下一行。我希望我的按钮在输入之后的同一行中。

解决办法是什么？

谢谢。

【问题讨论】：

标签： c# asp.net-mvc fluentbootstrap

【解决方案1】：

这个布局有点棘手——关键是要手动布局最后一个表单组，包括手动定位标签：

using (var form = Html.Bootstrap().Form().SetHorizontal().Begin())
{
    @form.InputFor(m => m.Id).SetReadonly().SetLg(3)
    @form.SelectFor(m => m.CountryId, Model.CountryList).SetLg(3)
    using (var formGroup = form.FormGroup().SetAutoColumns(false).Begin())
    {
        @form.ControlLabel(m => m.Name).SetMd(4)
        @form.InputFor(m => m.Name).SetControlLabel(null).SetLg(2)
        using (Html.Bootstrap().GridColumn().SetLg(1).Begin())
        {
            @Html.Bootstrap().Button().SetIcon(Icon.Film)
        }
    }
}

【讨论】：

【解决方案2】：

谢谢，还有一个解决办法：

    using (var form = Html.Bootstrap().Form().SetHorizontal().Begin())
    {
        @form.InputFor(m => m.Id).SetReadonly().SetLg(3)
        @form.SelectFor(m => m.CountryId, Model.CountryList).SetLg(3)
        using (form.FormGroup(m => m.Name).SetMd(0).Begin())
        {
          @form.InputFor(m => m.Name).SetControlLabel(null).SetLg(3)
          @Html.Bootstrap().Button().SetIcon(Icon.Film)
        }
    }

【讨论】：