ブートストラップドロップダウンメニューno CSS形式

Question

私はブートストラップのドロップダウンメニューを実装しようとしていますが、適切なクラスがサブリストに適用されていますが、通常はブートストラップに適用されるフォーマットとパディングが失われています。次のように私は、ブートストラップ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"> 
     &#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> 

Answer 1

をブートストラップ4は、ドロップダウンメニューに必要な余分なクラスがあります。 <li>タグで次のクラスを使用すると動作します。

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