Question

我正在ASP.net中构建一个基于Bootstrap的网站。我遇到过一些我坚持不懈的事情。

导航栏中的输入无效（仅限IOS）。我把它缩小到了插入符号在输入字段之外的位置。请参阅here，其中给出的解决方案完全相同，但采用模态。

关于如何使该解决方案在导航栏中工作的任何想法？模态的解决方案是使模态体位置固定，这在整个网页中不起作用。

以下是我看到的内容：

这是我的导航栏：

        <nav class="navbar navbar-expand-md navbar-dark position-fixed bg-dark bottomnavbar" style="z-index: 1;">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <asp:Repeater ID="rpt_categories" runat="server">
                    <ItemTemplate>
                        <li class="nav-item" id="catNav_<%# Eval("id")%>">
                            <asp:LinkButton ID="lb_newsCat" runat="server" ToolTip='<%# Eval("category") %>' OnCommand="lb_newsCat_Command1" CommandName="naviTo" CommandArgument='<%# Eval("category") + ";" + Eval("id")%>' CssClass="nav-link" Text='<%# Eval("category") %>'></asp:LinkButton>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
            <asp:TextBox ID="tb_Search" runat="server" type="search" CssClass="form-control" placeholder="Search"></asp:TextBox>
            <asp:Button ID="btn_Search" runat="server" OnClick="btn_Search_Click" CssClass="btn btn-outline-success my-2 my-sm-0" Text="Submit" />

        </div>
    </nav>

Answer 1

解决方案是@Rustyj发布的来源

    html, body {
                -webkit-overflow-scrolling: touch !important;
                overflow: auto !important;
                height: 100% !important;
     }

github.com/uswds/uswds/issues/277

ASP.net Bootstrap 4 Navbar输入插入仅限iOS

1 个答案: