Question

我在django项目中使用了一个使用bootstrap的navbar-inverse，它包含一个4＆＃34; li＆＃34;纽扣。问题是，我希望firth有2个选择（从其中一个中选择），这里是＆＃34; li＆＃34;的代码。：

<ul class="nav navbar-nav">
                <li class="{% block home_active %}{% endblock %}"><a href="{% url 'music:home' %}"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp; Home</a></li>
                <li class="{% block cloud_active %}{% endblock %}"><a href="{% url 'music:cloud' %}"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>&nbsp; Cloud</a></li>
                <li class="{% block albums_active %}{% endblock %}"><a href="{% url 'music:index' %}"><span class="glyphicon glyphicon-cd" aria-hidden="true"></span>&nbsp; Albums</a></li>
                <li class="{% block songs_active %}{% endblock %}">
                    <a href="{% url 'music:songs' 'all' %}"><span class="glyphicon glyphicon-music" aria-hidden="true">
                    </span>&nbsp; Songs</a>
                </li>
            </ul>

Answer 1

看来你想要这样的东西。 W3有一个现场演示here。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

导航栏选择选项

1 个答案: