Question

我一直在玩bootstrap，所以建立一个小的个人页面，我有一个看起来像这样的导航栏：

<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#home">Jon Snow</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="page-scroll">
                <a href="#about">About Me</a>
            </li>
            <li class="page-scroll">
                <a href="#work">Work</a>
            </li>
            <li class="page-scroll">
                <a href="#blog">Blog</a>
            </li>
            <li class="page-scroll">
                <a href="#contact">Contact Me</a>
        </ul>
    </div>
   </div>
  </nav>
</body>

其风格如下：

body {
   background-color:#2c3e50;
 }

.navbar-fixed-top.navbar-shrink {
   color:white;
   padding: 10px 0;
   background: rgba(0, 0, 0, .1);
 }

但是我在导航栏上看到如下所示的白线：

如何删除白线并将导航栏中的项目颜色更改为白色？

这是JS Fiddle。

Answer 1

以下是您可以应用于删除边框（在所有视口上）并更改li项目颜色的规则。

请参阅工作示例摘录。

body,
html {
  background: #2c3e50;
}
.navbar.navbar-default {
  padding: 10px 0;
  background: rgba(0, 0, 0, .1);
  border: none;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
  color: white;
}
.navbar.navbar-default .navbar-collapse {
  border: none;
  box-shadow: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="#home">Jon Snow</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="page-scroll">
          <a href="#about">About Me</a>
        </li>
        <li class="page-scroll">
          <a href="#work">Work</a>
        </li>
        <li class="page-scroll">
          <a href="#blog">Blog</a>
        </li>
        <li class="page-scroll">
          <a href="#contact">Contact Me</a>
      </ul>
    </div>
  </div>

Answer 2

只需将其添加到您的样式中：

.navbar {  border: none!important; }

Bootstrap nav具有默认边框。

颜色：

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

Answer 3

这家伙就在这里：

.navbar-default {
    border-color: #e7e7e7;
}

将其更改为none或与背景颜色相同的颜色。应该做的伎俩。

修改

抱歉，我错过了你问题的第二部分。这应该在导航栏中设置文本颜色：

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

然后您需要hover规则（或任何其他州）：

.navbar-default .navbar-nav>li>a { color: red; }

Answer 4

该行是由Bootstrap中的以下CSS引起的

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

使用您想要的任何颜色或无颜色覆盖此border-color。

对于此链接，使用此

更改颜色

.navbar-default .navbar-nav > li > a{
    color:**your color** !important;
}

您可以为此类链接执行悬停，活动，焦点和访问的颜色

.navbar-default .navbar-nav > li > a:hover{color: **your color** !important;}
.navbar-default .navbar-nav > li > a:active{color: **your color** !important;}
.navbar-default .navbar-nav > li > a:focus{color: **your color** !important;}
.navbar-default .navbar-nav > li > a:visited{color: **your color** !important;}

希望有所帮助！

如何从引导导航栏中删除此白线并更改文本颜色？

4 个答案: