html - 如何防止 <ul> 中某个特定元素的 css？

Question

我正在使用 Twitter Bootstrap 构建一个网站，现在我想在其中显示一个 LinkedIn 登录按钮，我正尝试为其使用 Bootstrap Social ，一个小的 css 文件 ( sources here )。当我在网站的常规部分使用下面的简单代码时，我得到了一个非常好的按钮。

<a class="btn btn-block btn-social btn-linkedin">
    <i class="fa fa-linkedin"></i> Sign in with LinkedIn
</a>

但是当我在构成导航栏中菜单项的无序列表中使用它时，我得到了一个可怕的困惑:

<ul id="navbar" class="nav navbar-nav navbar-right">
    <li><a id="index" href="/">Home</a></li>
    <li><a id="faq" href="/faq">FAQ</a></li>
    <li>
        <a class="btn btn-block btn-social btn-linkedin">
            <i class="fa fa-linkedin"></i> Sign in with LinkedIn
        </a>
    </li>
</ul>

我当然可以把按钮放在 <ul> 外面, 但随后它会显示在其他菜单项下方。

有谁知道如何在菜单项旁边显示 linkedin 按钮，同时保持其正确的样式？或者还有其他简单的解决方案吗？欢迎所有提示!

Answer 1

您的 LinkedIn 按钮似乎正在从您的导航、导航栏-导航、导航栏-右侧获取属性。

您需要在 LinkedIn 按钮上设置属性!重要或设置特定样式以覆盖其他 twitter bootstrap css