bootstrap下拉菜单没有css格式
问题描述:
我试图实现一个引导下拉菜单,尽管正确的类被应用到子列表,我失去了我的格式和通常适用于引导的填充。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">
<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">
☰
</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>
答
引导4具有下拉菜单需要一个额外的类。在<li>
标签中使用以下类别工作。
<li class="dropdown-item"><a href="{% url 'about' %}#vision">Vision</a></li>
+0
您应该将此标记为接受的答案。 – ZimSystem
您是否已经尝试过其他版本的bootstrap?有没有相同的错误? – DestinatioN
它不会帮助你的填充问题,但是你在上面的例子中缺少一个用于图像标签的第6行的'>' –
好喊。这很有效,但会弄乱一切。我会重新检查bs4的指导。 – woodbine