在移动设备上输入组附加错误（低分辨率屏幕）

Posted 2023-03-05

【中文标题】在移动设备上输入组附加错误（低分辨率屏幕）

【英文标题】：Input-group-append bugs when on mobile (lower resolution screens)

【发布时间】：2021-07-08 15:47:40

【问题描述】：

我在导航栏上有一个表单，我想在其中显示附加到我的文本框的提交按钮。 在更高分辨率的屏幕（非移动设备）上时，它可以按我的预期工作：

但是当我在移动设备上时，文本框和提交按钮之间会出现这样的间隙：

在某些页面中，我在搜索栏上输入更多内容时，差距会变得更大。

我的代码很简单，如你所见：

<nav class="navbar navbar-expand-lg">
    @using (html.BeginForm("Index", "Item", FormMethod.Get, new  id = "form-id", @class = "navbar-form" ))
    
        <span class="form-group">
            <span class="input-group">
                <input type="text" class="form-control"  placeholder="Buscar..." name="qsearch" id="qsearch" value=@auxQsearch />
                <span class="input-group-append input-group-btn">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </span>
            .
            .
            .
        </span>
        .
        .
        .
    
</nav>

我没有在我的 CSS 文件中编辑这些类。 前端对我来说有点新，我找不到解决方案，所以我很迷茫。

【参考方案1】：

我解决了！

这个问题出现在我的 CSS 中的一个属性中，当我在寻找解决方案时没有注意到它。

input,
select,
textarea 
    max-width: 280px;

发生的情况是，在移动设备上，表单会分成两行。然后，文本输入将尝试扩展自身以填充整行，但它受到 280 像素的限制，而按钮不会对其宽度做任何事情。 删除文本输入的最大宽度使其完全符合我的要求。