twitter-bootstrap 更改导航栏“引导程序”中的文本颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30842694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:49:43  来源:igfitidea点击:

Change text color in nav bar "Bootstrap"

htmlcsstwitter-bootstrap

提问by Mikkel

I'm a new user to bootstrap and want to change the color of the items in the navigation bar.

我是引导程序的新用户,想更改导航栏中项目的颜色。

Have created my own css file called Site.CSS, but also have the bootstrap.css file. Right now the text color of the heading "Home, booking, contact, login and register" is grey. When you hoover over it, it turns white.

已经创建了我自己的名为 Site.CSS 的 css 文件,但也有 bootstrap.css 文件。现在标题“首页、预订、联系、登录和注册”的文本颜色是灰色的。当你悬停在它上面时,它会变成白色。

I want it to be white as standard and change it to grey as you hoover over it with the mouse.

我希望它是标准的白色,并在您用鼠标悬停在它上面时将其更改为灰色。

Some code i have of the master page:

我拥有母版页的一些代码:

<form id="form" runat="server">
 <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/default.aspx">M-Hotels</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/default.aspx">Home</a></li>
                    <li><a runat="server" href="~/Booking.aspx">Booking</a></li>
                    <li><a runat="server" href="~/Contact.aspx">Contact</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Registration.aspx">Register</a></li>
                            <li><a runat="server" href="~/Login.aspx">Log in</a></li>
                        </ul>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a runat="server" href="~/User.aspx" title="Manage your account">Hello,!</a>
                            </li>
                            <li>
                                <a runat="server" href="~/default.aspx" title="Log out"></a>
                            </li>
                        </ul>
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
    </div>
    <div class="container body-content">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <hr />
        <footer>
            <p>&copy; <%: DateTime.Now.Year %> - M-Hotels A/S</p>
        </footer>
    </div>
</form>

Can any tell me, if i am supposed to change something in the bootstrap file or if i must add something to the Site.css file.

谁能告诉我,我是否应该更改引导程序文件中的某些内容,或者我是否必须向 Site.css 文件中添加某些内容。

回答by Anandh Sp

You can add this code in your Site.css file

您可以在 Site.css 文件中添加此代码

.nav.navbar-nav li a {
   color: #fff;
 }

.nav.navbar-nav a:hover {
 color: grey;
}

回答by David Setz

You should add something to your site.css What probably happens is that bootstrap styles are overwriting what you write. In that case you need to increase specificity

您应该向您的 site.css 添加一些东西 可能发生的情况是引导程序样式覆盖了您编写的内容。在这种情况下,您需要增加特异性

回答by David Setz

try this

试试这个

.nav.navbar-nav li a {
     color: #fff !important; 
 }
 .nav .navbar-nav li a:hover { 
     color: grey !important;
 }

回答by Spela Cedilnik

This is an old question but this is what worked for me:

这是一个老问题,但这对我有用:

a {
color: #536872;
text-decoration: none;
background-color: transparent;
}

`

`