Bootstrap下拉選單：無法更改錨鏈接的顏色及其專案文本顏色-有解無憂

您好，我正在嘗試更改 bootstrap 下拉錨點顏色及其下拉項顏色的顏色，但無濟于事，無法更改。下拉選單位于導航欄中。似乎有什么問題？

這是引導程式下拉錨點的 html 代碼。

.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 0px;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #fff;
  padding: 10px 15px;
  transition: 0.3s;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
}

.nav-menu a:hover{
  color: #4e4039;
  text-decoration: none;
}
.nav-menu .active{
  color: #fff;
  text-decoration: none;
}
.nav-menu li:hover{
  color: #4e4039;
  text-decoration: none;
}
.nav-item > li{
  color: #fff !important;
  text-decoration: none;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% - 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #3c1300;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #990000;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav-menu d-none d-lg-block">
  <ul>
    <li class="active"><a href="#header">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#Locate" target="_blank">Locate</a></li>
    <li><a href="#search">Search </a></li>
    <li><a href="#List">List</a></li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" 
    href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
    <div class="dropdown-menu dropdown-menu-right user-dd animated">

     <div class="dropdown-divider"></div>
      <a class="dropdown-item" data-toggle="modal" data-placement="top"  href="#account_edit_script">Account Settings</a>
     <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="logout.php">Logout</a>

     </div>
    </li>
  </ul>
</nav>

這是下拉項。

<div class="form-group">
           <label class="d-flex justify-content-center"><strong>Update Information</strong></label>
                 <label>Fullname</label>
                 <input type="text" name="user_fullname" value="<?php echo $row['user_fullname']; ?>" class="form-control" placeholder="" required>
                    </div>
           <div class="form-group">
                 <label>Email</label>
                 <input type="email" name="user_email" value="<?php echo $row['user_email']; ?>" class="form-control" placeholder="" required>
                 </div>
                 <div class="form-group">
                 <label>Password</label>
                 <input type="password" name="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
            title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
            placeholder="Enter New/Old Password" required>

我希望你能幫助我。我可能錯過了什么？我不知道，但請指出我正確的方向。

這是影像。圖片

下拉項

uj5u.com熱心網友回復：

這是因為類.text-muted有!important這將覆寫你的風格。要再次覆寫它，您必須!important再次添加樣式。這是代碼

.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 0px;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #fff;
  padding: 10px 15px;
  transition: 0.3s;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
}

.nav-menu a:hover{
  color: #4e4039;
  text-decoration: none;
}
.nav-menu .active{
  color: #fff;
  text-decoration: none;
}
.nav-menu li:hover{
  color: #4e4039;
  text-decoration: none;
}
.nav-item > li{
  color: #fff !important;
  text-decoration: none;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% - 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #3c1300;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #990000;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

.nav-menu a.text-muted {
  color: #fff!important;
}

nav.nav-menu {background: red;}
nav.nav-menu ul::after {content: ''; clear: both; display: table;}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav-menu d-none d-lg-block">
  <ul>
    <li class="active"><a href="#header">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#Locate" target="_blank">Locate</a></li>
    <li><a href="#search">Search </a></li>
    <li><a href="#List">List</a></li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" 
    href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
    <div class="dropdown-menu dropdown-menu-right user-dd animated">

     <div class="dropdown-divider"></div>
      <a class="dropdown-item" data-toggle="modal" data-placement="top"  href="#account_edit_script">Account Settings</a>
     <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="logout.php">Logout</a>

     </div>
    </li>
  </ul>
</nav>

<div class="form-group">
           <label class="d-flex justify-content-center"><strong>Update Information</strong></label>
                 <label>Fullname</label>
                 <input type="text" name="user_fullname" value="<?php echo $row['user_fullname']; ?>" class="form-control" placeholder="" required>
                    </div>
           <div class="form-group">
                 <label>Email</label>
                 <input type="email" name="user_email" value="<?php echo $row['user_email']; ?>" class="form-control" placeholder="" required>
                 </div>
                 <div class="form-group">
                 <label>Password</label>
                 <input type="password" name="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
            title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
            placeholder="Enter New/Old Password" required>

PS全屏打開這個片段

要為下拉選單顏色著色，只需添加以下內容

.nav-menu .dropdown-menu a {
    color: #333;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320837.html

標籤：css 推特引导

上一篇：如何在頁面重新加載超過10像素時激活顏色更改導航

下一篇：bootstrapSwitch不要在點擊時切換開關