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

本文关键字：添加 按钮 表单 输入 | 更新日期: 2023-09-27 18:31:57

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

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

解决方案是什么？

谢谢。

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

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

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

谢谢，还有另一种解决方案：

    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)
        }
    }
相关文章：