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

Question

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

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

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

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

<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 文件中编辑这些类。 前端对我来说有点新，我找不到解决方案，所以我很迷茫。

Answer 1

我解决了！

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

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

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