Django Bootstrap - 如何更改下拉菜单项的宽度答案

【问题标题】：Django Bootstrap - How to change width of dropdown menu itemsDjango Bootstrap - 如何更改下拉菜单项的宽度
【发布时间】：2020-12-23 22:06:33
【问题描述】：

我已经为我的网站创建了一个菜单和子菜单。链接都按预期工作，但我的布局有问题。当我单击特定菜单项时，会出现一个子菜单，但子菜单框的宽度太大，因为我只需要显示 2 个项目（租和买）。你能帮忙看看我能做些什么来纠正这个问题吗？我正在使用 Bootstrap.min.css。请参阅下面的模板文件

[![{% load static %}
<!-- Navbar -->
<div id="sticky-header" class="header-middle-area  transparent-header hidden-xs">
    <div class="container">
        <div class="full-width-mega-drop-menu">
            <div class="row">
                <div class="col-md-12">
                    <div class="sticky-logo">
                        <a href="{% url 'index' %}">
                            <img src="{% static 'index1/images/logo/logo3.png' %}" alt="">
                        </a>
                    </div>
                    <nav id="primary-menu">
                        <ul class="main-menu text-center">
                            <li><a href="{% url 'index' %}">{% if '/' == request.path %} <mark>Home</mark> {% else %} Home {% endif %}</a>                               
                            </li>                         
                            <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {% if 'listings_residential_rent' in request.path %} <mark>Residential Rent</mark> {% else %} Residential {% endif %}
                            </a>
                            <div class="dropdown-menu aria-labelledby="navbarDropdown">
                            <a href="{% url 'listings_residential_rent' %}">Rent</a>
                            <a href="https://www.youtube.com/">  Buy  </a>                      
                            </div>
                            </li>                           
                            <li><a href="{% url 'admin:index' %}">Realtor Login</a>                               
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>][1]][1]

【问题讨论】：

标签： html django bootstrap-4

【解决方案1】：

检查docs，您似乎缺少一些元素：

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

所以对你来说应该更像：

<li>
  <div class="dropdown">
    <a class="nav-link btn btn-secondary dropdown-toggle" href="#" role="button" id="navbarDropdown" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      {% if 'listings_residential_rent' in request.path %} <mark>Residential Rent</mark> {% else %} Residential {% endif %}
    </a>

    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="{% url 'listings_residential_rent' %}">Rent</a>
      <a class="dropdown-item" href="https://www.youtube.com/">Buy</a>
    </div>
  </div>
</li>

【讨论】：