下拉列表不适用于Web浏览器模式,但适用于移动设备模式

时间:2018-10-21 16:59:36

标签: django drop-down-menu

我的标题html出现问题。当我在nav上使用下拉菜单时,它不是在Web浏览器模式下扩展项目,而是在移动设备模式下扩展项目。谢谢您的帮助。

我的html代码:

 <header>

        <div class="container-fluid position-relative no-side-padding">

            <a href="#" class="logo"><img src="{% static 'img\logo2.jpg'%}" alt="Logo Image"></a>

            <div class="menu-nav-icon" data-nav-menu="#main-menu"><i class="ion-navicon"></i></div>

            <ul class="main-menu visible-on-click" id="main-menu">
            <li><a href="{% url 'index' %}">Anasayfa</a></li>
                <li class="dropdown">
                        <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                            <li><a tabindex="-1" href="#">Action</a></li>
                            <li><a tabindex="-1" href="#">Another action</a></li>
                            <li><a tabindex="-1" href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a tabindex="-1" href="#">Separated link</a></li>
                        </ul>
                </li>
                <li><a href="#">Hakkında</a></li>
                {% if request.user.is_authenticated %}

                <li><a href="{% url 'article:dashboard' %}">Kontrol Paneli</a></li>
                <li><a href="{% url 'logoutUser' %}">Çıkış</a></li>

                {% else %}

                <li><a href="{% url 'LoginUser' %}">Yazar Girişi Yap</a></li>

                {% endif %}


            </ul>

            <div class="src-area">
                <form>
                    <button class="src-btn" type="submit"><i class="ion-ios-search-strong"></i></button>
                    <input class="src-input" type="text" placeholder="Type of search">
                </form>
            </div>

        </div> 

</header>

我试图解决CSS中的溢出问题,但仍未解决问题。

.dropdown-item {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: normal;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
}

0 个答案:

没有答案