应用于<a> tag won&#39;t show in nav bar</a>的引导按钮样式

Question

如果这是一个愚蠢的问题，那么这里的总Bootstrap新手（还在学习CSS）如此大的道歉......

我构建了一个Bootstrap导航栏，最后一个链接作为按钮元素，但后来意识到更好的做法只是让它成为一个锚元素：

<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">Order Information</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#" class="btn btn-primary navbar-btn" role="button">Quote Request</a></li>
        </ul>
    </div>

btn-primary样式现在不再显示它嵌套在link元素中了，我似乎无法编写CSS以便它“看到”这个样式并覆盖div上的默认样式：

#tcsnavbar-links {
padding-right: 20px;
 }

#tcsnavbar-links ul li a {
color: #5f5f5f;
}

#tcsnavbar-links ul li a:hover {
background-color: #eeeeee;
color: black;
}

.btn-primary {
background-color: #00afec;
border-color: #0296ce;
font-size: 1.1em;
}

.btn-primary:hover {
background-color: #0077c5;
}

如果有人能指出我正确的方向，那将非常感激，thx：}

Answer 1

我发现您的问题很有趣，并开始阅读Bootstrap文档并尝试了一些事情。

根据我的理解，当你想要一个按钮时，使用锚元素并不是一个好习惯。因此，当您需要按钮时，请使用按钮元素。 Source

但是在大​​多数情况下它工作正常，并且还要在锚元素上使用按钮类。例如，您希望页面上的某个按钮链接到下一页，如下一页按钮。

但不是在.navbar-nav内使用它时。 Docs明确地说

  

特定于上下文的用法

     

与标准按钮类一样，.navbar-btn可以在<a>上使用   <input>元素。但是，既没有.navbar-btn也没有标准按钮   类应该用在.navbar-nav.

中的元素上

Source

但你能做的就是像这样使用nav-pills作为这个元素。然后，您在导航栏中有一个类似按钮的链接

<div class="collapse navbar-collapse" id="tcsnavbar-links">
  <ul class="nav navbar-nav nav-pills navbar-right">  
    <li><button href="#" class="btn btn-primary navbar-btn" type="button">Quote Request</button></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Order Information</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

Bootply