Question

我正在使用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)
}

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

解决方案是什么？

感谢。

Answer 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)
        }
    }
}

Answer 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)
        }
    }

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

2 个答案: