Twitter Bootstrap : navbar 내에서`.btn` 클래스를 사용하는 올바른 방법은 무엇입니까?

Twitter Bootstrap : navbar 내에서`.btn` 클래스를 사용하는 올바른 방법은 무엇입니까?

---

표준 내비게이션 항목에 내비게이션 바를 사용하고 및 로그인 및 가입 버튼을 포함하고 싶습니다.

나는 클래스와 a함께 태그를 사용 btn btn-large btn-success하고 있고 기본적으로 navbar가 중첩 된 사용을 수용하지 않습니다 btn.

결과는 다음과 가변적입니다.

마우스를 가져 가면 다음과 같이 나옵니다.

내 질문은 기본적으로 : 내가 잘못하고 있습니까? 내가 놓친 유전자 재조합?

.btn에 대한 CSS 클래스를 재정의하기 전에 물어볼 생각했습니다. navbar 내에서.

감사합니다.

---

navbar는 문제없이 버튼을 수용합니다. navbar에 아무 문제없이 버튼이 있고 Bootstrap 페이지 의 정적 navbar 예제에 추가 할 수 있습니다 .

HTML은 다음과 같이 배치되어야합니다.

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
    </div>
  </div>
</div>

반응 형 레이아웃을 사용하여 작은 화면에서 내비게이션 막대를 축소하지 않는 경우 버튼 링크를 <div class="container">.

그래도 문제가 발견되지 않은 언어 Chrome의 개발 도구

를 사용 하여 버튼에 적용되어서는 안되는 CSS가 무엇인지 확인하세요.

---

여기 에서 설명했듯이 div로 링크를 래핑하면 다음과 같이 작동합니다.

<div><a class='btn' href='#'>Link</a></div>

---

다음은 Jared Harley의 답변의 수정 된 버전입니다. 이것은 내가 드롭 다운에서 navbar에 드롭 다운을 지원합니다.

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
      <div class="pull-right">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
              Dropdown
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">item</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">another item</a>
              </li>
            </ul>
          </li>
          <li class="divider-vertical"></li>
        </ul>
        <a class="btn btn-primary" href="#">Primary</a>
        <a class="btn btn-success" href="#">Success</a>
      </div>
    </div>
  </div>
</div>

---

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Brand name</a>
            <ul class="nav">
                <li class="active"><a href="#">Main</a></li>
                <li><a href="#about">Next one</a></li>
            </ul>


            <div class="btn-group pull-right">
                <a class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Trololo</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>


        </div>
    </div>
</div>

---

navbar에 .btn을 넣을 때도 똑같은 문제가 발생했습니다. 마우스를 올렸을 때 버튼 bg의 절반을 "잘라 됐습니다". main.css에서 .nav> li> a.btn : hover를 다시 선언 한 방식으로 해결했습니다. -> 앱의 사용자 정의 스타일 파일은 bootstrap.css 배치되어 작동했습니다. 방화범이나 개발 도구의 요소를 검사하고 마우스를 가져 가려고하면 .btn 마우스 오버 스타일이 다음에 다시 작성하고 알 수 있습니다. bootstrap.css 파일의 버튼 네트워크 배치 탐색 호버 스타일 ...

---

다음을 추가하여 문제를 해결했습니다.

style="margin-top:10px;"

전체 버튼 코드는 다음과 가변합니다.

<a href="/register"><button class="btn btn-warning pull-right" style="margin-top:10px;">Register</button></a>

참고 URL : https://stackoverflow.com/questions/9252712/twitter-bootstrap-what-is-the-correct-way-to-use-the-btn-class-within-a-navb