Bootstrap 应用于 <a> 标签的按钮样式不会显示在导航栏中

Question

这里共有 Bootstrap 个新手（仍在学习 CSS），如果这是一个愚蠢的问题，我深表歉意...

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

<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 以便它 'sees' 这个样式并覆盖 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;
}

如果有人能指出正确的方向，我将不胜感激，谢谢:}

Answer 1

我发现你的问题很有趣并开始阅读 Bootstrap 文档并尝试了一些东西。

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

但在大多数情况下它工作正常，并且也打算在锚元素上使用按钮类。例如，您希望页面上任何地方的某个按钮 link 像下一个按钮一样指向下一页。

但在 .navbar-nav 内使用时则不然。文档明确地说

Context-specific usage

Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on elements within .navbar-nav.

Source

但是您可以像这样对这一元素使用导航丸。然后你在导航栏

中有一个类似按钮的按钮link

<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

Bootstrap 应用于 <a> 标签的按钮样式不会显示在导航栏中

Bootstrap button styling applied to <a> tag won't show in nav bar

css

twitter-bootstrap-3