[RUBY-ON-RAILS] 수정 트위터 부트 스트랩 네비게이션 바

수정 트위터 부트 스트랩 네비게이션 바

처럼 내가 정말 그들이 중심이 될지 때 필자는, 모든 링크가 왼쪽으로 정렬하는 순간, 트위터 부트 스트랩 네비게이션 바을 수정하는 노력.

다른 포스트에서 나는 당신이 사용하는 읽기

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

그러나 이것은 나를 위해 작동하지 않았다

난이 일어날 수 있도록하기 위해 CSS에서 변경해야하는 일, 내가 부트 스트랩 및 재정에 수정 된 CSS를 넣어 이해합니다.

어떤 도움에 감사드립니다

이 내 마크 업입니다

레이아웃 / 응용 프로그램

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

나는 또한이 시도했습니다

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}

해결법

1. ==============================

   1.대신 부동의 인라인 블록 :과 같이 왼쪽으로 당신은 화면에 메뉴 항목을 설정하여 탐색 메뉴를 중심으로 수 있습니다 :

   대신 부동의 인라인 블록 :과 같이 왼쪽으로 당신은 화면에 메뉴 항목을 설정하여 탐색 메뉴를 중심으로 수 있습니다 :

   .navbar .nav,
   .navbar .nav > li {
       float:none;
       display:inline-block;
       *display:inline; /* ie7 fix */
       *zoom:1; /* hasLayout ie7 trigger */
       vertical-align: top;
   }
   
    .navbar-inner {
       text-align:center;
   }
   

   난 당신이 센터에 원하는 것을 당신의 메뉴 바 메뉴를 대상으로 자신의 클래스를 만들 제안하지만,이 방법 당신은 당신이 당신의 페이지에있을 수있는 다른 탐색 섹션으로 부트 스트랩 기본 값과 혼란을 귀찮게하지 않습니다. 당신과 같이 그것을 할 수 있습니다 :

   네비게이션 바 컨테이너에 .center 클래스를 주목하라

   <div class="navbar navbar-fixed-top center">
        <div class="navbar-inner">
           ....
        </div>
   </div>
   

   그리고 그렇게 같은 .center 클래스를 타겟팅 할 수 있습니다 :

   .center.navbar .nav,
   .center.navbar .nav > li {
       float:none;
       display:inline-block;
       *display:inline; /* ie7 fix */
       *zoom:1; /* hasLayout ie7 trigger */
       vertical-align: top;
   }
   
   .center .navbar-inner {
       text-align:center;
   }
   

   데모 : http://jsfiddle.net/C7LWm/show/

   편집 : 왼쪽 하위 메뉴 항목을 재정렬 잊으이 수정 프로그램은 다음과 같습니다

   CSS

   .center .dropdown-menu {
       text-align: left;
   }
   

   데모 : http://jsfiddle.net/C7LWm/1/show/

2. ==============================

   2.나는 이것이 이전 게시물입니다 알고 있지만 나는 또한 내 인터넷 검색이 포스트를 몇 번 나타났습니다. 실제로 현재 승인 된 방법으로 트위터 부트 스트랩의 네비게이션 바의 중심을 똑바로 기록을 설정하려는 것은 잘못된 것이 아니라 트위터 부트 스트랩이를 지원하는 필요하지 않습니다.

   나는 이것이 이전 게시물입니다 알고 있지만 나는 또한 내 인터넷 검색이 포스트를 몇 번 나타났습니다. 실제로 현재 승인 된 방법으로 트위터 부트 스트랩의 네비게이션 바의 중심을 똑바로 기록을 설정하려는 것은 잘못된 것이 아니라 트위터 부트 스트랩이를 지원하는 필요하지 않습니다.

   수동으로 수정 한 후이 일을 더 좋은 방법은 실제로 있습니다. 이 트위터 부트 스트랩에 이미 무엇을 사용하여 코드로 줄일 것입니다.

   <div class="navbar navbar-fixed-top navbar-inverse">
       <div class="navbar-inner">
           <div class="container">
               <a class="brand" href="#">RIZEN</a>
               <ul class="nav">
                   <li class="active"><a href="/">Home</a></li>
                   <li><a href="#">Events</a></li>
                   <li><a href="#">Links</a></li>
                   <li><a href="#">Gallery</a></li>
                   <li><a href="#">Contact</a></li>
                   <li><a href="#">Forums</a></li>
               </ul>
           </div>
       </div>
   </div>
   

   고장 우리는, 네비게이션 바에을 만드는 상단에 뷰포트에 고정 된 위치로 설정하고 색상 테마를 반전시켜 검은 색에 흰색을 교환하는 첫째 줄은 매우 간단하다.

   우리는 모든 가능한에서 최소의 높이를 설정 한 경우, 네비게이션 바 - 내부 다소 말한다 할당 할 예정되고 다음으로 실제 색상 stylings가 위가 아닌 라인에서 오는 곳이다.

   여기에서 우리는 네비게이션 바의 유체 레이아웃을 삭제하고 단지 컨테이너로가는 등의 중요한 라인이다. A는 마진이 고정 세트 중심 맞춰 스크린 내 콘텐츠. 이 자동 마진을 가진, 그리고 폭을 설정을 통해 이루어집니다.

   이 방법을 사용하면 추가 코드를 부풀게를 가진 여분의 코드를 추가하고 트위터 부트 스트랩 제대로 비계를 사용하지 않음으로써 헤더 요청에 KB 저장 실제로으로 원하는 것을 할 것입니다. 난 내 자신의 프로젝트에이 방법을 사용하고 내 현재 프로젝트에서 사용을 계속했다. TBS에게 (트위터 부트 스트랩을) 수정과 함께 위험은 코드의 일관성을 잃고 미래에 당신이 변경 것을 원하는 경우에 당신이 의도 한대로 당신이 일하지 않을 수 있습니다 작업, 그렇지 않으면 변경 한 내용의 정신을 기록해해야한다는 것입니다.

   도움이 되었기를 바랍니다. 당신이 작업 예제를 원하는 경우 그냥 가지고로서 또한 단지 트위터 부트 스트랩의 홈 페이지를 봐주세요.

3. ==============================

   3.당신이 대칭으로 양쪽에 공간에 대한 ( "프로젝트 이름"전 "드롭 다운"후)하고자하는 경우 아 또한, 다음을 추가합니다 :

   당신이 대칭으로 양쪽에 공간에 대한 ( "프로젝트 이름"전 "드롭 다운"후)하고자하는 경우 아 또한, 다음을 추가합니다 :

   .navbar .nav, .navbar .nav > ul
   {
       float: right
   }
   

   또한, (부트 스트랩 v2.0.4 기준) 다음을 사용하여 여전히 네비게이션 바의 중심을하지 않는 것 같습니다 :

   <div class="navbar navbar-fixed-top center">
         <div class="navbar-inner">
           <div class="container-fluid">
           .
           .
           .
           </div>
         </div>
   </div>
   

   당신은 변경해야

   <div class="navbar navbar-fixed-top center">
         <div class="navbar-inner">
           <div class="container">
           .
           .
           .
           </div>
         </div>
   </div>
   

   (안드레스의 llich에서 제공하는 샘플에서 추출, 그는 변화를 놓쳤다 단지)

   지금은 나를 위해 작동 ...

4. ==============================

   4.잘되지 않은 붕괴 navbars에서만 위의 작품에서 중심 CSS를.

   잘되지 않은 붕괴 navbars에서만 위의 작품에서 중심 CSS를.

   네비게이션 바에가 축소 될 때, 비록 이상적인 아니에요. 기본적으로 각 축소 된 메뉴 바 항목 드롭 다운 메뉴처럼, 자신의 행에 있습니다. 그러나 시도 위의 CSS는 이상적인 미만 동일한 행에 모두 붕괴 항목을 밀어합니다.

   이 단지가 아닌 붕괴 navbars 트리거됩니다, 그래서 나는, 미디어 쿼리의 중심 CSS를 포장의이 작은 수정을 사용 :

   @media (min-width: 768px) {
       .center.navbar .nav,
       .center.navbar .nav > li {
           float:none;
           display:inline-block;
           *display:inline; /* ie7 fix */
           *zoom:1; /* hasLayout ie7 trigger */
           vertical-align: top;
       }
       .center .navbar-inner {
           text-align:center;
       }
   }
   

   (부트 스트랩 3.1.1 테스트)

from https://stackoverflow.com/questions/10568103/modify-twitter-bootstrap-navbar by cc-by-sa and MIT license