如何仅为注册按钮更改Bootstrap 4导航栏链接颜色？

时间：2018-11-27 09:43:00

标签： css html5 twitter-bootstrap css3 bootstrap-4

我已将注册类添加到一个导航项，并尝试将其链接颜色更改为白色。但是，无论我尝试了什么，都没有改变链接的颜色。它始终保持默认状态。这是代码：

HTML 

<nav class="navbar navbar-expand-md  bg-faded ">
  <a class="navbar-brand" href="#">
    <img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
  </a>

    <button class="navbar-toggler" type="button"
          >
    <span class="navbar-toggler-icon"></span>
  </button>


 <div class="collapse navbar-collapse"
      >
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" routerLink="/home" >Item 1</a>
      </li>

      <li class="nav-item signin">
        <a class="nav-link" routerLink="/sign-in" >Sign in</a>
      </li>

       <li class="nav-item signup">
        <a class="nav-link" routerLink="/sign-up" >Sign Up</a>
      </li>
    </ul>
  </div>
</nav>

CSS 

.navbar {
  position: relative;
  background-color:#ffffff;
     box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

.nav-item{
    margin:5px;
}

.signin, .signup {
    border:2px solid;

}

.signin {
    border-color:#232323 !important;
}

nav .nav-item ul li a.signin {
    color:#232323;
}

.signin:hover {
    background-color:#232323;
    color:#ffffff;
}

nav .nav-item ul li .signin a :hover {
    color:#ffffff;
}

.signup {
    background-color:#44A423;
    border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {

    font-size:23px;
    padding:10px 20px;
}

.navbar-light .navbar-nav .nav-item.signup .nav-link {
    color:#fff;
    font-size:23px;
}

如何将注册导航项目的链接颜色设为白色？对于完整的示例，我还将在评论中共享一个链接：

3 个答案:

答案 0 :(得分：1)

您可以像下面这样向li标签添加文本白色类

  <li class="nav-item signup text-white">
    <a class="nav-link" routerLink="/sign-up" >Sign Up</a>
  </li>

答案 1 :(得分：1)

像这样添加它

.signup a {
  color: white;
}

您需要在锚点上添加颜色，而不是li 

section {
  background: #2193b0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding-top: 5%;
  width: 100%;
  /* New code */
  height: 100%;
  overflow: hidden;
  padding-top: 80px;
  margin-top: -80px;
}

.navbar {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .2);
}

.nav-item {
  margin: 5px;
}

.signin,
.signup {
  border: 2px solid;
}

.signin {
  border-color: #232323 !important;
}

nav .nav-item ul li a.signin {
  color: #232323;
}

.signin:hover {
  background-color: #232323;
  color: #ffffff;
}

nav .nav-item ul li .signin a :hover {
  color: #ffffff;
}

.signup {
  background-color: #44A423;
  border-color: #44A423;
}

.signup a {
  background-color: #44A423;
  border-color: #44A423;
  color: white;
}

.navbar-light .navbar-nav .nav-item .nav-link {
  font-size: 23px;
  padding: 10px 20px;
}

.navbar-light .navbar-nav .nav-item.signup .nav-link {
  color: #fff;
  font-size: 23px;
}

.emp-profile {
  padding: 5%;
  border-radius: 0.5rem;
  background: #fff;
  margin-top: 50px;
  margin-bottom: 50px
}

.profile-img {
  text-align: center;
}

.profile-img img {
  width: 70%;
  height: 100%;
}

.main-col h5 {
  color: #333;
}

.main-col h6 {
  color: green;
  margin-bottom: 30px
}

.row-details {
  margin-top: 30px
}

.profile-tab label {
  font-weight: 600;
}

.profile-tab p {
  font-weight: 600;
  color: green;
}

.img-content {
  margin: 30px 15px !important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<div class="container">
  <nav class="navbar navbar-expand-md  bg-faded ">
    <a class="navbar-brand" href="#">
      <img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
    </a>

    <button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
  </button>


    <div class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link" routerLink="/home">Item 1</a>
        </li>

        <li class="nav-item signin">
          <a class="nav-link" routerLink="/sign-in">Sign in</a>
        </li>

        <li class="nav-item signup">
          <a class="nav-link text-white" routerLink="/sign-up">Sign Up</a>
        </li>


      </ul>
    </div>
  </nav>
</div>
<section>
  <div class="container">
    <div class="emp-profile justify-content-center">
      <form method="post">
        <div class="row">
          <div class="col-md-4">
            <div class="profile-img">
              <img src="https://picsum.photos/50" alt="" />
            </div>
          </div>
          <div class="col-md-8 col-sm-12 col-12">
            <div class="tab-content profile-tab" id="myTabContent">
              <div class="row">
                <div class="col-md-4 main-col col-sm-12  col-12 d-flex d-sm-block flex-column align-items-center">
                  <h5>
                    Kshiti Ghelani
                  </h5>
                  <h6>
                    24 Years Old
                  </h6>
                </div>
                <div class="col-md-3 col-sm-6 col-6">
                  <a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>

                </div>
                <div class="col-md-2 col-sm-6 col-6">
                  <a href="#" class="btn button-image closeButton btn-message">Message</a>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Username</label>
                  <p class="ml-auto">Kshiti123</p>
                </div>
                <div class="col-6 d-flex">
                  <label>Profession</label>
                  <p class="ml-auto">Designer</p>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Gender</label>
                  <p class="ml-auto">Female</p>
                </div>
                <div class="col-6 d-flex">
                  <label>Job Title</label>
                  <p class="ml-auto">UI Designer</p>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Country</label>
                  <p class="ml-auto">UK</p>
                </div>
                <div class="col-6 d-flex">
                  <label>City</label>
                  <p class="ml-auto">Oxford</p>
                </div>
              </div>



            </div>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-10">
            <p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
              quo minim nostro ut.
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

答案 2 :(得分：1)

您在html中没有pass_word.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if(pass_word.getText().toString().length() > 0){ if(hasLength(pass_word.getText().toString())){ check_length.setChecked(true); }else{ check_length.setChecked(false); } if(hasSymbol(pass_word.getText().toString())){ check_symbol.setChecked(true); }else{ check_symbol.setChecked(false); } if(hasUpperCase(pass_word.getText().toString())){ check_upper.setChecked(true); }else{ check_upper.setChecked(false); } if(hasLowerCase(pass_word.getText().toString())){ check_lower.setChecked(true); }else{ check_lower.setChecked(false); } }else{ check_lower.setChecked(false); check_upper.setChecked(false); check_length.setChecked(false); check_symbol.setChecked(false); } } @Override public void afterTextChanged(Editable s) { } }); 类，因此无法获得CSS！

.navbar-light

悬停示例： 

.navbar-nav .nav-item .nav-link {

    font-size:23px;
    padding:10px 20px;
}

.navbar-nav .signup .nav-link {
    color:#fff;
    font-size:23px;
}
相关问题
最新问题