>source

내 웹 사이트에 대한 사용자 지정 스타일을 사용하여 세로로 정렬 된 부트 스트랩 알약을 만들려고합니다.

그러나 어쨌든 알약이 활성화되면 (클릭하여) 다른 탭을 클릭하여 비활성화되지 않으므로 결과적으로 탭을 올바르게 변경할 수 없습니다.

그리고 3 ~ 6 번째 알약은 아무 효과가 없습니다.

데모

.h-bstfecture-ul{
  list-style: none;
}
.h-bstfecture-ul li{
  padding-top: 30px;
  padding-bottom: 30PX;
  padding-right: 45PX;
  padding-left: 20PX;
  border-top: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}
.h-bstfecture-ul li a{
  text-decoration: none;
  color: #222222;
  font-size: 12px;
  margin-top: 4px;
}
.h-bstfecture-ul li img{
  max-height: 26px;
  max-width: 26px;
  /*fill: #222222;
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);*/
}
.h-bstfecture-ul li:hover a{
  color: #FFC000;
}
.bestservice-pillstitle{
  color: #222222;
  font-size: 28px;
  font-weight: 600;
}
.bestservice-pills-paragraph{
  color: #777777;
  font-size: 14px;
}
.bestservice-pillscontent ul{
  list-style: none;
}
.bestservice-pillscontent ul li{
  border: 1px solid #E5E5E5;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: #777777;
  font-size: 14px;
}
.ylw-tik{
  width: 12px;
}
.our-service-title{
  color: #222222;
  font-size: 24px;
  font-weight: 600;
}
.our-service-title:before, .our-service-title:after{
  content:" ";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
  width: 30px;
  height: 4px;
  background-color: #FFC000;
}
.our-service-subtitle{
  color: #777777;
  font-size: 14px;
  max-width: 650px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<div class="content-fluid">
  <div class="row d-flex justify-content-center m-0 mb-5">
    <div class="our-service-head">
      <p class="our-service-title text-center">Our Best Features</p>
      <p class="our-service-subtitle text-center px-3">
        Nulla ullamcorper bibendum orci, ac tempor nisl lacinia quis. 
      </p>
    </div>
  </div>
  <div class="row m-0 d-flex justify-content-center">
    <div class="bestservice-pills col-xl-2 mx-3 p-0">
      <ul class="h-bstfecture-ul m-0 p-0 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <li class="row m-0 nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
          <div style="width: 35px;"><img src="icons/our-best-feacture-1.svg"></div>
          <a href="#" class="ml-2">Efficient Inspection</a>
        </li>
        <li class="row m-0 nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-2.svg"></div>
          <a href="#" class="ml-2">Employee Safety</a>
        </li>
        <li class="row m-0 nav-link" id="3rd-tab" data-toggle="pill" href="#3rd" role="tab" aria-controls="3rd" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-3.svg"></div>
          <a href="#" class="ml-2">Industrial Automation</a>
        </li>
        <li class="row m-0 nav-link" id="4th-tab" data-toggle="pill" href="#4th" role="tab" aria-controls="4th" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-4.svg"></div>
          <a href="#" class="ml-2">Employee Feedback</a>
        </li>
        <li class="row m-0 nav-link" id="5th-tab" data-toggle="pill" href="#5th" role="tab" aria-controls="5th" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-5.svg"></div>
          <a href="#" class="ml-2">Live Data Monitoring</a>
        </li>
        <li class="row m-0 nav-link" id="6th-tab" data-toggle="pill" href="#6th" role="tab" aria-controls="6th" aria-selected="false">
          <div style="width: 35px;"><img src="icons/our-best-feacture-6.svg"></div>
          <a href="#" class="ml-2">Technological Support</a>
        </li>
      </ul>
    </div>
    <div class="col-xl-5 border border-primary mx-1 p-0 tab-content" id="v-pills-tabContent">
      <!-- 1st pill -->             
      <div class="bestservice-pillscontent tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>1st</p>
      </div>
      <div class="bestservice-pillscontent tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>2nd</p>
      </div>
      <div class="bestservice-pillscontent tab-pane fade" id="3rd" role="tabpanel" aria-labelledby="3rd-tab">
        <p>3rd</p>
      </div>
      <div class="bestservice-pillscontent tab-pane fade" id="4th" role="tabpanel" aria-labelledby="4th-tab">
        <p>4th</p>
      </div>
      <div class="bestservice-pillscontent tab-pane fade" id="5th" role="tabpanel" aria-labelledby="5th-tab">
        <p>5th</p>
      </div>
      <div class="bestservice-pillscontent tab-pane fade" id="6th" role="tabpanel" aria-labelledby="6th-tab">
        <p>6th</p>
      </div>
    </div>
    <div class="col-xl-3 border border-primary mx-1 p-0">
      <div class="m-0">
        <img src="images/best fecture-1.png">
      </div>
    </div>
  </div>
</div>

이 문제를 어떻게 해결할 수 있습니까?

문제의 파일 링크- https://github.com/Kanchon-Gharami/problems-share-in-git.git

  • 답변 # 1

    문제는 기본적으로 사용하려는 것입니다. pill 아닌 요소에 a 꼬리표.

    Bootstrap javascript-behavior에서 볼 수 있듯이 모든 예제는 pill 의 위에 a 꼬리표.

    또한 Via JavaScript에는 아래 코드가 있습니다.

    $('#myTab a').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
    
    

    이것은 아마도 관리하는 데 사용되는 유사한 코드 일 것입니다. pill . 그래서 기본적으로 그것은 a 꼬리표.

    아래에서 알약과 잘 작동하는 코드의 간단한 데모를 찾을 수 있습니다. a 오른쪽을 가리키는 태그 + href id (파란색 배경을 올바른 방법으로 최적화 할 수 있습니다) :

    .h-bstfecture-ul{
      list-style: none;
    }
    .h-bstfecture-ul li{
      padding-top: 30px;
      padding-bottom: 30PX;
      padding-right: 45PX;
      padding-left: 20PX;
      border-top: 1px solid #E5E5E5;
      border-right: 1px solid #E5E5E5;
      border-bottom: 1px solid #E5E5E5;
    }
    .h-bstfecture-ul li a{
      text-decoration: none;
      color: #222222;
      font-size: 12px;
      margin-top: 4px;
    }
    
    .h-bstfecture-ul li img{
      max-height: 26px;
      max-width: 26px;
      /*fill: #222222;
      filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);*/
    }
    .h-bstfecture-ul li:hover a{
      color: #FFC000;
    }
    .bestservice-pillstitle{
      color: #222222;
      font-size: 28px;
      font-weight: 600;
    }
    .bestservice-pills-paragraph{
      color: #777777;
      font-size: 14px;
    }
    .bestservice-pillscontent ul{
      list-style: none;
    }
    .bestservice-pillscontent ul li{
      border: 1px solid #E5E5E5;
      margin-top: 15px;
      margin-bottom: 15px;
      padding-left: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      color: #777777;
      font-size: 14px;
    }
    .ylw-tik{
      width: 12px;
    }
    .our-service-title{
      color: #222222;
      font-size: 24px;
      font-weight: 600;
    }
    .our-service-title:before, .our-service-title:after{
      content:" ";
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        margin-right: 10px;
      width: 30px;
      height: 4px;
      background-color: #FFC000;
    }
    
    .our-service-subtitle{
      color: #777777;
      font-size: 14px;
      max-width: 650px;
    }
    
    

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <div class="content-fluid">
      <div class="row d-flex justify-content-center m-0 mb-5">
        <div class="our-service-head">
          <p class="our-service-title text-center">Our Best Features</p>
          <p class="our-service-subtitle text-center px-3">
            Nulla ullamcorper bibendum orci, ac tempor nisl lacinia quis. 
          </p>
        </div>
      </div>
      <div class="row m-0 d-flex justify-content-center">
        <div class="bestservice-pills col-xl-2 mx-3 p-0">
          <ul class="h-bstfecture-ul m-0 p-0 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <li class="row m-0 nav-item">
              <a href="#v-pills-home" class="ml-2 nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
                <div style="width: 35px;"><img src="icons/our-best-feacture-1.svg"></div>
                Efficient Inspection
              </a>
            </li>
            <li class="row m-0 nav-item">
              <a href="#v-pills-profile" class="ml-2 nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
                <div style="width: 35px;"><img src="icons/our-best-feacture-2.svg"></div>
                Employee Safety
              </a>
            </li>
          </ul>
        </div>
        <div class="col-xl-5 border border-primary mx-1 p-0 tab-content" id="v-pills-tabContent">
    
          <!-- 1st pill -->             
          <div class="bestservice-pillscontent tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <p>1st</p>
          </div>
          <div class="bestservice-pillscontent tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            <p>2nd</p>
          </div>
          <div class="bestservice-pillscontent tab-pane fade" id="3rd" role="tabpanel" aria-labelledby="3rd-tab">
            <p>3rd</p>
          </div>
          <div class="bestservice-pillscontent tab-pane fade" id="4th" role="tabpanel" aria-labelledby="4th-tab">
            <p>4th</p>
          </div>
          <div class="bestservice-pillscontent tab-pane fade" id="5th" role="tabpanel" aria-labelledby="5th-tab">
            <p>5th</p>
          </div>
          <div class="bestservice-pillscontent tab-pane fade" id="6th" role="tabpanel" aria-labelledby="6th-tab">
            <p>6th</p>
          </div>
    
        </div>
        <div class="col-xl-3 border border-primary mx-1 p-0">
          <div class="m-0">
            <img src="images/best fecture-1.png">
          </div>
        </div>
      </div>
    </div>
    
    

관련 자료

  • 이전 java - 인서트가 사용될 때마다 스프링 기본 키 생성기
  • 다음 debugging - 추가 컴파일 플래그를 전달하여 Bitbake 레시피에서 빌드 디버그