如何防止<ul>中的一个特定项目的css？</ul>

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

Answer 2

通过为其父li定义类来覆盖导航栏元素的默认css：

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

例如：

li.my-linkedin a {
color:white;
}