在引导程序中重新排序导航栏下拉列表

Question

我在网站导航栏中遇到有关下拉菜单的问题。我正在使用bootstrap v 3.3.6

在悬停菜单名称（此处为功能）时，我希望它看起来像旁边的按钮（请求演示按钮）。悬停时右侧边缘变得更锐利。我在网上冲浪很多，但最终我还没有找到必要的解决方法。

这是我的代码段

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><%= image_tag("logo.png", alt: "industryPrime") %></div>
    <ul class="navigation pull-right">

        <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#" class="scroll-link" data-id="paperless_purchase_section">Paperless purchase</a></li>
        <li><a href="#" class="scroll-link" data-id="efficient_stores_section">Efficient stores</a></li>
        <li><a href="#" class="scroll-link" data-id="peace_of_mind_section">Peace of mind</a></li>
      </ul>
    </li>
      <li class="req_demo">

        <%= link_to "Request Demo", user_request_demo_page_path , :onclick => "demo_clicked()" ,:onmouseover => "start_count()" , :onmouseout => "stop_count()" %>
      </li>
        <li id="Login button section"><%= link_to 'Login', {controller: 'sessions', action: 'new'} %></li>



        <li><a href="#" class="scroll-link" data-id="contact">Contact Us</a></li>
        <li><%= image_tag("contact_us.png") %>+91 98302-15353</li>
    </ul>
 </div>
</div>
</nav>

请参阅下拉列表的右侧名为＆＃34; FEATURES＆＃34;左侧是完美的，非常锋利。我希望右侧应该像左侧一样。黑色效应只是因为徘徊而产生的一件事。

Answer 1

如果您包含以下css规则，则右侧的功能框将收到一些填充

<style>
      .dropdown {
          padding-right: 10px;
        }
</style>

虽然我怀疑你在这里使用某种模板语言，但你没有提到过。