Question

我需要对导航栏进行一些修改。我一直在尝试但无法做到。

*我需要更改bootstrap导航栏的字体颜色 *我的导航栏背景是透明的，我还需要摆脱默认出现的边框 *如何将导航栏项目列表排列为居中对齐。

请帮忙。下面是html代码。

<nav class="navbar  navbar-default  navbar-fixed-top">
  <div class="container-fluid the-navbar">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>


    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="cover.html">Learning Pulse</a>
        <li><a href="Index.html">Home</a>
        <li><a href="mycourse.html">Course</a>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
         <li><a href="signup.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

  </div>
</nav>

Css是代码

.navbar {
position:absolute;
top:30px;
z-index:10;
background:transparent;
width:80%;
margin-left:auto;
margin-right:auto;
 font-style: times;
font-size:19px;
 }

.navbar li a {
color: white;
}

Answer 1

只有几条CSS线，我们得到了它=）

.navbar {
  position:absolute;
  top:30px;
  z-index:10;
  background:transparent;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-style: times;
  font-size:19px;

 }
.navbar ul{
  text-align:center;
}
#navbar ul li a {
  color:red;
}

.navbar{
  background:lightblue;
  border:none;
}

https://jsfiddle.net/Ldf7xswh/1/

导航栏字体颜色

1 个答案: