bootstrap-vue navbar 항목 드롭다운을 사용하여 텍스트 색상 변경

bootstrap-vue navbar 항목 드롭다운을 사용하여 텍스트 색상 변경

사용하고 있다Bootstrap-Vue웹 페이지를 작성하는데, 그러나 나는 텍스트 색상을 변경하는 데 어려움을 겪는다.Bootstrap navbar특히,b-nav-item-dropdown태그를 사용합니다.<span class="text-dark"에 싸다b-nav-item-dropdown태그가 붙어있었지만 동작하지 않았습니다.의 변형은,b-navbar는 텍스트 색상 배열을 어둡게 또는 밝게만 설정할 수 있습니다.

코드는 다음과 같습니다.

<div>
  <b-navbar toggleable="md" type="dark" variant="primary">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav class="pl-5" inline>

      <b-nav-item-dropdown text="Electronics">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>


      <b-nav-item-dropdown text="Sports">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>

    </b-navbar-nav>
    <!--Login button-->
    <b-navbar-nav class="ml-auto pr-5">
      <b-button size="me">Login</b-button>
    </b-navbar-nav>

  </b-collapse>
</b-navbar>
</div>

내 목표는 모든 텍스트를 받아 들이는 것이다.b-nav-item-dropdown회색 애쉬색 대신 검은색으로 변경해 주세요.

컴포넌트를 추가 요소 및 클래스로 랩하지 말고 DOM을 검사하고 해당 요소에 규칙을 적용하여 커스텀 요소로 변경하십시오.나는 그 과정을 따랐고 나는 그 과정을 이해했다.color에 적용되다b-nav-item-dropdown어느 것이#ffffff80이 선택기에 적용됨.navbar-dark .navbar-nav .nav-link그럼 다음으로 변경하겠습니다.black다음과 같습니다.

  <template>
  ...
 </template>
  <style>
   .navbar-dark .navbar-nav .nav-link{
      color:black!important
    }
 </style>

에서 추가 수업을 통과합니다.toggle-class예를 들어 다음과 같습니다.

<b-nav-item-dropdown toggle-class="text-dark" text="Electronics">

이 컴포넌트가 지원하는 기타 소품은 https://bootstrap-vue.js.org/docs/components/nav#dropdown-support을 참조하십시오.

언급URL : https://stackoverflow.com/questions/52770048/change-text-colour-with-bootstrap-vue-navbar-item-dropdown