내 탐색에 로고를 추가하려고합니다.

솔직히 말해서, 나는 아마도 뭔가를 놓친 것입니다.내 탐색에 로고를 추가하려고합니다.

http://s24.postimg.org/a8bo7btol/Untitled.png

지금 내 HTML의 기본 구조를 가지고 있고 대략 700 픽셀로 브라우저를 축소 할 때 주요 문제가 있습니다 : 내가 부트 스트랩 3와 함께 할 노력하고있어 다음과 같습니다 탐색을 가지고있다 와이드, 메인 네비게이션 상단에 머무르며, 두 번째 네비게이션은 내 메인 네비게이션 (기본적으로 - 너비가 초과되어 모든 것이 다운 됨) 아래에있게됩니다.

<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) --> 
      <a href="index.php" class="navbar-brand logo-nav"><img src="images/icon.png"></a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav navbar"> 
      <li><a href="#about">About</a></li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#about">About</a></li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container --> 
    </nav>

... 여기

body { 
    margin-top: 125px; 
} 
.nav { 
    margin-top: 28px; 
}

내 HTML입니다 I : 여기서 X 45

enter image description here

내 이미지는 (374)는 CSS 비 부트 스트랩입니다 내 재치가 끝나면 ... 내가 뭘 놓친거야?

출처

2013-12-12 user2124871

이상적으로 가능한 한 길게 같은 줄에 있어야하며 탐색 버튼으로 축소해야합니다. – user2124871

크기의 무결성을 유지할 수있는 이미지의 크기를 유지하는 데 사용할 수있는 옵션은 무엇입니까? (그것이 옵션 인 경우) – user2124871

codehorse - 그 기사는 훌륭하고 유익했습니다. 로고를 축소 할 때 로고를 수정하는 것과 관련된 몇 가지 아이디어가 있다고 생각합니다. 실제로 단축 된 테스트에서 작동합니다. – user2124871

는

body { 
margin-top: 125px; 
}  
.logo-nav { 
    padding: 5px 0px; 
} 
.logo-nav img{ 
    width:254px; 
    height: auto; 
}

이 사물이 작동하는 것 ...이와 외부 CSS를 교체합니다. 패딩을 사용하여 로고 위의 공간을 제어 할 수 있습니다. 총 50px (전체 패딩 + 계산 된 로고 높이)를 넘지 않아야합니다. 이 경우 로고 너비를 줄이거 나 네비게이션 높이를 높이십시오. 정답으로 받아 들여 감사하다는 말을 할 수 있습니다.

출처

2013-12-12 05:07:47 ravisuhag

안녕하세요 - 귀하의 도움에 감사드립니다! 그러나 최종 결과는 동일했습니다. 당신이 제공 한 CSS를 추가하는 것은 똑같은 곤경에 처하게되었습니다. 그러나, 내 끝날지 모르지만, 나는 두 번 확인해 보겠습니다. 교수형에 처하는 것을 원하지 않았습니다 (미안, 개인적인 삶에 뭔가가 생겼습니다). – user2124871

내 탐색에 로고를 추가하려고합니다.

답변

관련 문제