【问题标题】:Bootstrap 4.5 Dropdown appearing as multiple links on iOSBootstrap 4.5 下拉菜单在 iOS 上显示为多个链接
【发布时间】:2020-11-28 04:37:38
【问题描述】:

当我尝试在 ASP.NET 页面上的 Bootstrap 导航栏中加载下拉列表时,该列表的桌面版本会完全按照它在 official navbar documentation 上的显示方式加载,但在 iPad Air 上加载同一页面时则不然2 与 iOS 13.3.1。它们不是以下拉方式加载列出的项目,而是显示在下拉菜单的名称下方。同样,切换“汉堡包”按钮显示为空白按钮。

我在其他地方听说列表中的链接需要有href="#",但这已经完成了,如下所示:

头

<meta http-equiv="X-UA-Compatible" content="IE=edge, width=device-width, initial scale=1.0" />
<title>Navbar Testing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="packages/popper.js.1.16.1/content/Scripts/popper.min.js"></script>

身体

<form id="form1" runat="server">
 <asp:ScriptManager ID="smmaster" runat="server" EnablePartialRendering="true" EnablePageMethods="true"></asp:ScriptManager>
 <div id="wrapper">
  <asp:UpdatePanel ID="uppnl" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container-fluid">
      <a class="navbar-brand" href="#">
       <div class="container-sm">
        Navbar Test
       </div>
      </a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent"
       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" type="button" />
       <span class="navbar-toggler-icon" />
      </button>
      <div class="navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
        <li class="nav-item dropdown" style="background-color: white;">
         <a href="#" id="btnMain" class="btn dropdown-toggle" type="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">Main</a>
         <div id="ddlMain" runat="server" class="dropdown-menu" aria-labelledby="btnMain">
          <a class="dropdown-item" href="#">A link</a>
          <a class="dropdown-item" href="#">Another link</a>
          <a class="dropdown-item" href="#">A third and final link</a>
         </div>
        </li>
       </ul>
      </div>
     </div>
    </nav>
   </ContentTemplate>
  </asp:UpdatePanel>
 </div>
</form>

对此的任何帮助将不胜感激! ????

【问题讨论】:

  • 似乎 CSS 文件没有正确包含在 ipad 中

标签: css ios asp.net twitter-bootstrap bootstrap-4


【解决方案1】:

问题是bootstrap.min.css 文件是从 CDN 加载的,而不是使用本地文件。格式化错误可以通过 Nuget 检索 Bootstrap 并像这样导入文件来解决:

<link href="../../Content/bootstrap.min.css" rel="stylesheet" />

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-10-01
    • 2017-12-25
    • 1970-01-01
    • 2022-01-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多