Question

我是bootstrap的新手，当你想要改变你给类或id的字体的颜色时，我正在使用我对css3的了解，或者用它来定位它然后改变你的字体。我正在使用预先构建的navBar并尝试执行相同操作，但它无法正常工作。有人可以帮助我不仅答案，而且解释如何定位我的链接所有顶部更改为WHITE字体颜色。

<!DOCTYPE html>
<html lang="en">
  <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



        <title>Richard Jimenez Portfolio</title>

          <style type="text/css">
              #myList{
                  font:white;
              }


          </style>

      </head>

    <body>   

    <header>
            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

        <a class="navbar-brand" href="#">MyApp</a>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto" id="myList">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Resume</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
    </header>
      </body>
    </html>

Answer 1

您只需要更具体地定位您要定位的元素

#myList a {
    color: white;
}

BootStrap4字体颜色

1 个答案: