2016-04-13 103 views
2

我试图实现一个引导下拉菜单,尽管正确的类被应用到子列表,我失去了我的格式和通常适用于引导的填充。bootstrap下拉菜单没有css格式

我使用的是引导4.0.0-alpha.2如下:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 

screenshot from dropdown-menu

<nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> 
     &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs navbar-collapse" id="exCollapsingNavbar2"> 
     <a class="navbar-brand" href="{% url 'home' %}"><img width="140" src="{% static 'images/openopps_logo.png' %}"</a> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'pricing' %}">Pricing</a></li> 
      <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'home' %}">Blog</a></li> 
      <li class="nav-item oo-roboto-override dropdown"> 
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="{% url 'about' %}"> 
        About 
        <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="{% url 'about' %}#vision">Vision</a></li> 
        <li><a href="{% url 'about' %}#our_company">Our company</a></li> 
        <li><a href="{% url 'about' %}#faqs">FAQs</a></li> 
        <li><a href="{% url 'about' %}#contact_us">Contact us</a></li> 
       </ul> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav pull-xs-right"> 
      {% if user.is_authenticated %} 
       <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_logout' %}"><button class="btn btn-sm btn-oo-outline">Logout</button></a></li> 
      {% else %} 
       <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'registration_register' %}"><button class="btn btn-sm btn-oo">Sign Up</button></a></li> 
       <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_login' %}"><button class="btn btn-sm btn-oo-outline">Login</button></a></li> 
      {% endif %} 
     </ul> 
    </div> 
</nav> 
+0

您是否已经尝试过其他版本的bootstrap?有没有相同的错误? – DestinatioN

+0

它不会帮助你的填充问题,但是你在上面的例子中缺少一个用于图像标签的第6行的'>' –

+0

好喊。这很有效,但会弄乱一切。我会重新检查bs4的指导。 – woodbine

回答

2

引导4具有下拉菜单需要一个额外的类。在<li>标签中使用以下类别工作。

<li class="dropdown-item"><a href="{% url 'about' %}#vision">Vision</a></li> 
+0

您应该将此标记为接受的答案。 – ZimSystem