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

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

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

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

Input-group-append bugs when on mobile (lower resolution screens)

html

css

mobile

frontend

bootstrap-4