Bootstrap เปลี่ยนสีเมนู navbar ไม่ได้ สีไม่เปลี่ยนทำอย่างไร

ใช้ Bootstrap Framework สร้างเมนูด้วย navbar ต้องการเปลี่ยนสีโดยใช้คำสั่ง background-color แต่ลองแล้วสีไม่เปลี่ยน ยังคงเป็นสีเดิม ปัญหานี้ต้องแก้ไขอย่างไร โค้ดเมนู navbar บางส่วนตามด้านล่าง

<nav class="navbar navbar-light bg-light" style="background-color: #2AA580;">
  <a class="navbar-brand" href="#" style="margin-left: 1rem">
    MyWebSite
  </a>
</nav>

วิธีแก้ไข

แนะนำให้ใส่คำสั่ง !important ด้านหลังคำสั่ง background-color เพื่อบังคับให้เปลี่ยนสีตามคำสั่งนี้ เนื่องจากตัวเมนู navbar ของ Bootstrap จะโหลดสีเริ่มต้นจาก class .bg-light หรือ .bg-dark สามารถแก้ไขโค้ดได้ดังนี้

<nav class="navbar navbar-light bg-light" style="background-color: #2AA580 !important;">
  <a class="navbar-brand" href="#" style="margin-left: 1rem">
    MyWebSite
  </a>
</nav>

ผลลัพธ์