Как изменить цвет ссылки Bootstrap 4 Navbar только для кнопки регистрации? - PullRequest
Новая
       7

Как изменить цвет ссылки Bootstrap 4 Navbar только для кнопки регистрации?

0 голосов
/ 27 ноября 2018

Я добавил класс регистрации к одному элементу навигации и пытаюсь изменить его цвет ссылки на белый.Но что бы я ни пытался, никто из них не изменил цвет ссылки.Он остается по умолчанию один все время.Вот код:

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 голосов
/ 27 ноября 2018

Добавьте это вот так 

.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>
0 голосов
/ 27 ноября 2018

У вас нет класса .navbar-light в html, поэтому вы не можете получить CSS! 

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

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

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

Пример наведения: 

.navbar-nav .nav-item .signup .nav-link:hover{
    color:#fff;
    font-size:23px;
}
0 голосов
/ 27 ноября 2018

Вы можете просто добавить класс text-white к тегу li, как показано ниже 

  <li class="nav-item signup text-white">
    <a class="nav-link" routerLink="/sign-up" >Sign Up</a>
  </li>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...