로고가있는 부트 스트랩 3 Navbar

텍스트 브랜딩 대신 이미지 로고가있는 Bootstrap 3 기본 탐색 메뉴를 사용하고 싶습니다. 화면 크기가 다른 문제를 일으키지 않고이 작업을 수행하는 올바른 방법은 무엇입니까? 나는 이것이 일반적인 요구 사항이라고 가정하지만 아직 좋은 코드 샘플을 보지 못했습니다. 모든 화면 크기에 적합한 디스플레이를 제공하는 것 이외의 핵심 요구 사항은 작은 화면의 메뉴 축소 가능성입니다.

navbar-brand 클래스가있는 A 태그 안에 IMG 태그를 넣으려고했지만 안드로이드 폰에서 메뉴가 제대로 작동하지 않습니다. 나는 또한 navbar 클래스의 높이를 높이려고 시도했지만 더 많은 것을 망쳤습니다.

그건 그렇고, 내 로고 이미지는 탐색 표시 줄의 높이보다 큽니다.

왜 모두가 어려운 일을하려고합니까? 물론 이러한 접근 방식 중 일부는 효과가 있지만 필요한 것보다 더 복잡합니다.

먼저, 네비게이션 바에 맞는 이미지가 필요합니다. CSS 높이 속성을 통해 이미지를 조정하거나 (너비를 조절할 수 있음) 적절한 크기의 이미지 만 사용할 수 있습니다. 무엇을하기로 결정하든, 이렇게 보이는 방식은 이미지의 크기를 얼마나 잘 조정 하느냐에 달려 있습니다.

어떤 이유로 든 모든 사람이 이미지를 앵커 내부에 붙이기를 원하므로 navbar-brand이것이 필요하지 않습니다. navbar-brand이미지뿐만 아니라 navbar-left클래스에 필요하지 않은 텍스트 스타일을 적용합니다 (왼쪽 풀과 같지만 탐색 모음에 사용). 정말로 필요한 것은을 추가하는 것 navbar-left입니다.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

이미지 오른쪽에 나타나는 탐색 모음 브랜드 항목으로이를 수행 할 수도 있습니다.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

많은 예제와 함께 완벽한 데모

중요 업데이트 : 12/21/15

이 페이지에서 MANY DEMOS를 사용하여 특정 브라우저 너비에서 탐색 모음을 손상 시키는 버그가 Mozilla에서 발견되었습니다 . 기본적으로 모질라 버그는 이미지 너비의 일부로 탐색 막대 브랜드 링크의 왼쪽 및 오른쪽 패딩을 포함합니다. 그러나 이것은 쉽게 고칠 수 있으며 이것을 테스트 했으며이 페이지에서 가장 안정적인 작업 예라고 확신합니다. 자동으로 크기가 조정되며 모든 브라우저에서 작동합니다.

CSS에 이것을 추가하고 원하는 방식으로 navbar-brand를 사용하십시오 .img-responsive. 로고가 자동으로 맞춰집니다

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

다른 옵션은 배경 이미지를 사용하는 것입니다. 모든 크기의 이미지를 사용하고 원하는 너비를 설정하십시오.

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

아래의 원래 답변 (참조 용)

사람들은 객체 적합을 많이 잊어 버리는 것 같습니다. 개인적으로 이미지가 메뉴 크기에 자동으로 조정되기 때문에 가장 쉬운 방법이라고 생각합니다. 이미지에 객체 맞춤을 사용하면 메뉴 높이로 자동 크기가 조정됩니다.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

이것이 IE "아직"에서는 작동하지 않는 것으로 지적되었습니다. 거기에있다 polyfill은 ,하지만 당신은 무엇을 위해 그것을 사용 계획이없는 경우가 과도한 수 있습니다. IE의 향후 릴리스에 대해 객체 적합이 계획되는 것처럼 보이 므로 일단 발생하면 모든 브라우저에서 작동합니다.

그러나 부트 스트랩에서 .img 응답 클래스를 발견하면 max-width는 이러한 이미지를 열 또는 세트가있는 명시 적 인 이미지에 넣었다고 가정합니다. 이는 100 %가 특히 상위 요소의 100 % 너비를 의미 함을 의미합니다.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

우리가 navbar와 함께 사용할 수없는 이유는 부모 (.navbar-brand)의 고정 높이가 50px이지만 너비가 설정되어 있지 않기 때문입니다.

우리는 그 논리를 가지고있는 경우 역 이 높이에 따라 반응하는 것으로 우리는 .navbar 브랜드 높이 추가 및 자동 설정에 의해 스케일이 비율로 조정됩니다 폭 있다는 응답 이미지를 가질 수 있습니다.

max-height: 100%;
width: auto;

일반적으로 display:block;시나리오 에 추가 해야하지만 navbar-brand에는 이미 float : left가 있으므로; 그것에 적용되면 자동으로 블록 요소로 작동합니다.

로고가 너무 작은 드문 상황이 발생할 수 있습니다. img-responsive 접근법은 이것을 고려하지 않지만 우리는 할 것입니다. "height"속성을 추가 .navbar-brand > img하면 확장 및 축소 될 수 있습니다.

max-height: 100%;
height: 100%;
width: auto;

그래서이 작업을 완료하기 위해 두 가지를 모두 합쳤으며 모든 브라우저에서 완벽하게 작동하는 것 같습니다.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

데모 http://codepen.io/bootstrapped/pen/KwYGwq

귀하의 질문이 흥미 롭지 만 하나의 답변이있을 것으로 기대하지는 않습니다. 아마도 귀하의 질문이 너무 광범위 할 수 있습니다. 솔루션은 다음에 의존해야합니다. 탐색 표시 줄의 다른 콘텐츠 (항목 수), 로고 크기, 로고가 반응해야하는 경우 등 navbar- 브랜드 클래스를 사용해야합니다. 15 픽셀의 패딩 (위 / 아래)이 추가되기 때문입니다.

300x150 픽셀의 로고로 http://getbootstrap.com/examples/navbar/ 에서이 설정을 테스트합니다 .

전체 화면> 1200 :

768 ~ 992 픽셀 사이 (메뉴가 축소되지 않음) :

<768 (메뉴 축소)

미적 측면 외에는 기술적 인 문제가 없었습니다. 작은 화면에서는 큰 로고가 뷰포트와 겹치거나 깨질 수 있습니다. 768에서 992 픽셀 사이의 화면은 내용이 줄에 맞지 않을 때 다른 문제가 있습니다 (예 : https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18 참조).

기본 탐색 표시 줄 의 기본 탐색 표시 줄 예제는 아래쪽 여백을 30px로 추가하므로 탐색 표시 줄의 내용이 페이지의 내용과 겹치지 않아야합니다. (탐색 된 네비게이션 바에는 네비게이션 바의 높이가 다를 때 문제가 있습니다).

네비게이션 바를 다양한 화면 크기에 맞게 조정하려면 CSS와 미디어 쿼리가 필요합니다. 질문을 좁히십시오. 안드로이드에서 찾은 문제를 설명하십시오.

업데이트 예는 http://bootply.com/77512 를 참조하십시오 .

휴대 전화와 같은 작은 화면에서는 축소 된 메뉴가 로고 위에 나타납니다.

코드에서 버튼과 로고를 교환하고 로고를 먼저 (로고에 float : left 설정)

상단을 제외한 다른 메뉴 항목을 정렬 할 수있는 방법이 없습니다

을 설정 margin-top하기위한 .navbar-collapse ul. 로고 높이에서 navbar 높이를 뺀 값을 아래쪽에 맞추거나 (logo height-navbar height) / 2를 가운데

기본 높이 (50px)보다 큰 로고로 부트 스트랩 탐색 모음을 만드는 방법에 대한 지침 :

예 로고 100 픽셀 X 100 픽셀, 표준 CSS와 :

1. 로고의 높이와 (패딩 상단 + 패딩 하단)을 계산합니다. 여기 120px (높이 100px + padding top (10px) + padding bottom (10px))

2. 고토 부트 스트랩 / 사용자 정의 . 대신 설정 메뉴 바 높이 50 픽셀> 120 픽셀 (70 + 50) 및 메뉴 바 붕괴 - 최대 높이 에 340px에서 410 픽셀 (340 + 70). CSS를 다운로드하십시오 .

3. 이 예제에서는이 navbar를 사용합니다 . 에서 네비게이션 바 브랜드 :

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...

   추가 예제에 대한 클래스, mylogo를 , 그리고 IMG (로고)를

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

4. CSS 추가

   .myLogo {패딩 : 10px; }

5. 다른 크기에 적합합니다.

예

글쎄, 마침내이 같은 문제가 발생했습니다. 여기 내 솔루션이 있으며 Chrome, Firefox 및 Internet Explorer의 세 가지 주요 브라우저 모두에서 내 사이트에서 테스트했습니다.

우선 텍스트 기반 로고를 사용하지 않는 경우이 특정 클래스가 축소 된 탐색 메뉴가 두 배가되는 주요 원인 인 것으로 확인되면 "navbar-brand"를 완전히 제거하십시오.

나를 올바른 방향으로 인도하기 위해 user3137032에게 소리 지르십시오.

사용자 정의 반응 형 이미지 컨테이너를 만들어야합니다. "로고"라고했습니다.

부트 스트랩 HTML 마크 업은 다음과 같습니다.

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

그리고 CSS 코드 :

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

@media (최대 너비 : x)의 값은 로고 이미지 너비에 따라 다를 수 있습니다. 내 크기는 368px입니다. 로고 크기에 따라 백분율을 변경해야 할 수도 있습니다. 첫 번째 @ 미디어 쿼리는 임계 값이어야하며 광산은 이미지 너비 (368px) + 축소 된 버튼 크기 (44px) + 약 60px이며 반응 형 이미지 스케일링을 시작하는 480px로 나왔습니다.

HTML 부분에서 면도기 구문을 제거하십시오. 문제가 해결되면 알려주세요.

편집 : 죄송합니다. 네비게이션 바 높이 문제가 없습니다. 개인적으로 Bootstrap LESS를 적절한 탐색 표시 줄 높이로 컴파일하여 내 목적으로 70px를 사용하고 이미지 높이는 68px입니다. 두 번째 방법은 bootstrap.css 파일 자체에서 ".navbar"를 검색하고 최소 높이를 로고 높이로 변경하는 것입니다.

내 솔루션은 img 태그에 CSS "display : inline-block"을 추가하는 것입니다.

<img style="display: inline-block; height: 30px; margin-top: -5px">

데모 : jsfiddle

img-responsive 클래스를 사용한 다음 a요소 의 최대 너비를 설정합니다 . 이처럼 :

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

그리고 CSS :

.navbar-brand {
    max-width: 50%;
}

다음과 같이 코드를 사용해야합니다.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

태그 클래스는 탐색 모음 브랜드가 아닌 "로고"여야합니다.

로고가 얼마나 키가 큰지에 따라 다릅니다.

<a>탐색 표시 줄 의 기본 높이는 20 픽셀이므로 height: 20px로고 를 지정하면 잘 정렬됩니다.

그러나 그것은 로고에 비해 작기 때문에 내가 선택한 것은 이것입니다.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

이렇게하면 이미지를 30px 높이로 만들고 위쪽에 음수 여백을 추가하여 이미지를 세로로 정렬합니다 (5px는 a의 패딩과 이미지 크기의 차이의 절반 임).

또는 <a>요소 의 패딩을 변경할 수 있습니다. 예 :

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

빠른 수정은 : 당신을위한 클래스를 생성 logo하고 설정 height에 28px. 이것은 모든 장치의 탐색 모음과 잘 작동합니다. 나는 "WELL"이 효과가 있다고 말했다.

.logo {
  display:block;
  height:28px;
}

내 접근 방식은 전화, 태블릿, 데스크탑, 대형 데스크탑에 대해 서로 다른 크기의 서로 다른 네 가지 이미지를 포함하지만 부트 스트랩의 반응 형 유틸리티 클래스를 사용하여 하나만 표시하는 것입니다.

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

참고 : 주석 처리 된 줄을 제공된 코드로 바꿀 수 있습니다. 워드 프레스를 사용하지 않는 경우 PHP 코드를 교체하십시오.

편집 참고 2 : 예, 페이지를로드 할 때 서버에 요청이 추가되어 약간 느려질 수 있지만 배경 CSS 스프라이트 기술을 사용하면 페이지를 인쇄 할 때 로고가 인쇄되지 않고 위의 코드가 표시 될 가능성이 있습니다 더 나은 SEO.

Bootstrap3이 제공하므로 추가 CSS를 추가 할 필요가 없습니다. 추가하지 않으려는 경우. 이것은 로고를 왼쪽에 놓고 오른쪽에 링크하는 코드입니다. 이 탐색은 반응 형입니다. 적합하다고 생각되면이를 변경하십시오.

HTML :

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

또한 CSS 배경 속성을 통해 구현합니다. 모든 너비 값에서 Healty로 작동합니다.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

또 다른 방법은 구현하는 부트 스트랩에 내장 된 .text-hide클래스 의 함께 .navbar-brand배경 이미지와 브랜드 텍스트 / 내용을 바꿀 수 있습니다.

CSS :

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML :

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

이것은 매우 일관된 방법이며 이미지를 중앙에 유지합니다. 이미지의 크기를 조정하려면 .navbar-brand높이가 이미 설정되어 있으므로 너비를 조정 하면됩니다.

라이브 데모입니다

나는 같은 문제가 있었다. 나는 이것을 다음과 같이 해결했다.

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

탐색 모음 브랜드 클래스가 없습니다. 결과는 탐색 표시 줄에 맞는 로고 그림처럼 보이고 링크처럼 작동합니다. 또한 메뉴 항목에 대해 navbar-right 클래스를 사용하여 로고 아래로 이동하지 않는 것이 좋습니다.

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

어쩌면 이것은 너무 간단하지만 이미지와 텍스트 중 두 가지가 있도록 navbar 브랜드 라인을 복사했습니다.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

그리고 나는 네비게이션 바 안에 맞는 이미지를 만들었습니다 (약 1/2 높이).

LESS를 사용하면 다음과 같이 작동합니다.

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

이 코드는 브랜드가 중앙에 있고 툴바에서 자동 너비가 필요한 경우에 완벽하게 작동합니다. 올바른 경로에서 이미지 파일을 가져 오는 Wordpress 함수가 포함되어 있습니다.

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

.navbar-brand수업에 다음을 추가하십시오

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

내 작업 코드-부트 스트랩 3.0.3. 탐색 표시 줄을 숨기거나 숨겨진 xs 원본 로고 이미지

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

아래와 같은 @media 쿼리를 사용해보십시오.

먼저 로고 클래스를 추가 한 다음 @media를 사용하여 로고 크기와 장치 크기 당 너비를 지정하십시오. 아래 예에서는 최대 너비가 320px (iPhone) 인 기기를 타겟팅하고 있습니다. 가장 적합한 것을 찾을 때까지이 기기를 가지고 놀 수 있습니다. 손쉬운 테스트 방법 : inspect 요소와 함께 Chrome 또는 Firefox를 사용하십시오. 브라우저를 최대한 줄이십시오. 지정한 @media max 너비를 기준으로 로고 크기 변경을 확인하십시오. iPhone, Android 기기, iPad 등에서 테스트하여 원하는 결과를 얻으십시오.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

다음 코드를 시도하십시오 :

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

내 경우에 다른 답변을 사용하지 못하고 (아마도 지능 테스트를 통과하지 못했을 수도 있음) 실험 후 이것이 내가 사용하고있는 것입니다 (부트 스트랩 기본값과 매우 비슷하다고 생각합니다).

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

그리고 CSS 파일에서 다음을 추가했습니다.

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

참고 @Html.ActionLink()을위한 면도기 구문입니다 <a>태그입니다. 어디 말한다 @Html.ActionLink(...)단지 적절한으로 대체 <a>태그입니다. 같은 위치 @Url.Action(...)에 적절한 URL로 교체하십시오 ( <a>이 경우 태그 없음 ).

이것은 의미가 없지만 기존 a요소를 사용하고 배경 이미지를 설정 한 다음 @ 2x 해상도, 더 작은 화면 크기 등에 대한 여러 변형을 만듭니다.

그런 다음이 .text-hide클래스를 사용 하여 페이지에 어떤 방식 으로든 텍스트를 얻을 수 있습니다 . 이미지를 올바르게 사용하지는 않지만 간단하고 효과적입니다.

다음은 텍스트 대체를위한 헬퍼 클래스에 대한 링크입니다.

http://getbootstrap.com/css/#helper-classes

이 질문에 대한 가장 쉽고 가장 좋은 대답은 로고에 따라 최대 너비와 높이를 설정하는 것입니다. 이미지의 높이는 최대 50px이지만 최대 200px입니다.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

로고 크기와 가지고있는 탐색 모음 항목에 따라 다릅니다.

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

자신의 노력으로 코드를 이해하십시오 : D 이것은 내 초안 코드이며 이미 작동합니다 :) 스크린 샷입니다.

텍스트 브랜딩을 대체하는 대신 아래 코드와 같이 두 개의 행으로 나누고 img-responsive이미지에 클래스를 제공했습니다 ...

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

또한 다음 CSS 코드를 추가했습니다 .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

내 코드로 문제를 해결하면 기쁘다 .....

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>

                   </button>
                <a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

// 코드 헤드에 부트 스트랩을 추가하는 것을 잊지 않았다.