出了什么问题 - 移动兼容性不起作用答案

【问题标题】：What is wrong--Mobile Compatibility not Working出了什么问题 - 移动兼容性不起作用
【发布时间】：2021-10-08 05:54:06
【问题描述】：

我一直在网站上工作，目前，标题可以在桌面上工作并且可以响应，但是当我使用移动设备时，引导程序不显示并且它不与移动设备交互这是我的代码到目前为止，如果有人能告诉我出了什么问题，那将非常有帮助。

  <div class="continer-fluid">
  <nav class="navbar navbar-inverse bg-inverse navbar-fixed-top">
   <div class="navbar navbar-expand-lg ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span> 
    </button>
    <div class="container">
         <a href="/" class="navbar-brand">
                <img src="{% static "app/content/collectore-luxury-logo11.png" %}" width="30" height="30" class="d-inline-block align-top" alt="">
            Website
        </a>
        
        <div class="collapse navbar-collapse " id="#navbarSupportedContent">
    
            <ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="nav-item"><a href="{% url 'about' %}">About</a></li>
                <li class="nav-item"><a href="Medium Blog">Blog</a></li>
                <li class="nav-item"><a href="{% url 'New Thing' %}">New Thing</a></li>
            </ul>

【问题讨论】：

标签： javascript html css django twitter-bootstrap

【解决方案1】：

我得到了这个代码来工作

<div class="continer-fluid">
      <nav class="navbar navbar-inverse bg-inverse navbar-fixed-top navbar-light bg-light">
        <div class="navbar navbar-expand-lg ">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span> 
          </button>
          <div class="container">
            <a href="/" class="navbar-brand">
              <img src="{% static "app/content/collectore-luxury-logo11.png" %}" width="30" height="30" class="d-inline-block align-top" alt="">
              Website
            </a>
            
            <div class="collapse navbar-collapse " id="navbarSupportedContent">
        
              <ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="nav-item"><a href="{% url 'about' %}">About</a></li>
                <li class="nav-item"><a href="Medium Blog">Blog</a></li>
                <li class="nav-item"><a href="{% url 'New Thing' %}">New Thing</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>

改变：

data-toggle="collapse" 到 data-bs-toggle="collapse"
data-target="#navbarSupportedContent" 到 data-bs-target="#navbarSupportedContent"
<div class="collapse navbar-collapse " id="#navbarSupportedContent"> 到 <div class="collapse navbar-collapse " id="navbarSupportedContent">
我在导航中添加了 navbar-light 和 bg-light 类，以便我可以在浏览器上看到它。
记得包含 bootstrap 的 <link> 和 <script> 标签

如果仍然无法正常工作，则可能是浏览器或 css 前缀的问题。在不同的移动和桌面浏览器上尝试您的代码。更多信息：Vendor Prefixes

希望这会有所帮助！

【讨论】：

【解决方案2】：

您需要配置 CSS 兼容样式

【讨论】：