Bootstrap 3 Navbar พร้อมโลโก้

ฉันต้องการใช้ Navbar เริ่มต้น Bootstrap 3 พร้อมโลโก้รูปภาพแทนการสร้างแบรนด์ข้อความ วิธีที่เหมาะสมในการทำเช่นนี้คืออะไรโดยไม่ทำให้เกิดปัญหากับขนาดหน้าจอที่แตกต่างกัน ฉันถือว่านี่เป็นข้อกำหนดทั่วไป แต่ฉันยังไม่เห็นตัวอย่างโค้ดที่ดี ข้อกำหนดสำคัญอื่น ๆ นอกเหนือจากการแสดงผลที่ยอมรับได้ในทุกขนาดหน้าจอคือการยุบเมนูบนหน้าจอขนาดเล็ก

ฉันพยายามใส่แท็ก IMG ไว้ในแท็ก A ที่มีระดับแบรนด์ navbar แต่นั่นทำให้เมนูไม่สามารถทำงานได้อย่างถูกต้องบนโทรศัพท์ Android ของฉัน ฉันยังพยายามเพิ่มความสูงของคลาส navbar แต่นั่นทำให้สิ่งต่าง ๆ แย่ลงไปอีก

อย่างไรก็ตามรูปโลโก้ของฉันมีขนาดใหญ่กว่าความสูงของแถบนำทาง

ทำไมทุกคนพยายามทำมันอย่างหนัก? แน่นอนว่าวิธีการเหล่านี้บางอย่างจะใช้งานได้ แต่มันซับซ้อนกว่าที่จำเป็น

ตกลงก่อนอื่นคุณต้องมีภาพที่พอดีกับ navbar ของคุณ คุณสามารถปรับภาพของคุณผ่านทางแอตทริบิวต์ css height (อนุญาตให้ปรับความกว้าง) หรือคุณสามารถใช้ภาพที่มีขนาดที่เหมาะสม ไม่ว่าคุณจะตัดสินใจเลือกแบบไหนลักษณะนี้จะขึ้นอยู่กับว่าคุณปรับขนาดภาพของคุณอย่างไร

ด้วยเหตุผลบางอย่างทุกคนต้องการติดภาพภายในสมอด้วยnavbar-brandและนี่ไม่จำเป็น navbar-brandใช้รูปแบบข้อความที่ไม่จำเป็นสำหรับรูปภาพรวมถึงnavbar-leftคลาส (เช่นดึงซ้าย แต่ใช้ใน navbar) 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

ขณะนี้มีข้อผิดพลาดใน Mozillaฉันค้นพบว่าแบ่ง navbar กับความกว้างของเบราว์เซอร์ที่มีหลาย ๆ DEMOS บนหน้านี้ โดยพื้นฐานแล้วข้อผิดพลาด mozilla นั้นรวมถึงช่องว่างด้านซ้ายและขวาบนลิงค์แบรนด์ navbar ซึ่งเป็นส่วนหนึ่งของความกว้างของภาพ อย่างไรก็ตามสิ่งนี้สามารถแก้ไขได้ง่ายและฉันได้ทำการทดสอบและฉันค่อนข้างแน่ใจว่ามันเป็นตัวอย่างการทำงานที่เสถียรที่สุดในหน้านี้ มันจะปรับขนาดโดยอัตโนมัติและทำงานบนเบราว์เซอร์ทั้งหมด

เพียงแค่เพิ่มนี้เพื่อ CSS ของคุณและใช้ navbar .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-responsive ใน bootstrap ความกว้างสูงสุดคือสมมติว่าคุณกำลังใส่รูปภาพเหล่านี้ในคอลัมน์หรือสิ่งที่มีชุดที่ชัดเจน นี่หมายความว่า 100% หมายถึงเฉพาะความกว้าง 100% ขององค์ประกอบพาเรนต์

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

เหตุผลที่เราไม่สามารถใช้สิ่งนั้นกับ navbar นั้นเป็นเพราะพาเรนต์ (.navbar-brand) มีความสูงคงที่ที่ 50px แต่ไม่ได้ตั้งค่าความกว้าง

หากเราใช้ตรรกะนั้นและย้อนกลับให้เป็นการตอบสนองตามความสูงเราสามารถมีภาพที่ตอบสนองซึ่งปรับขนาดตามความสูงของแบรนด์แถบ. และโดยการเพิ่มและความกว้างของการตั้งค่าอัตโนมัติมันจะปรับตามสัดส่วน

max-height: 100%;
width: auto;

โดยปกติแล้วเราจะต้องเพิ่มdisplay:block;ในสถานการณ์ แต่เนื่องจาก navbar-brand มี float: left แล้ว ใช้กับมันโดยอัตโนมัติทำหน้าที่เป็นองค์ประกอบบล็อก

คุณอาจพบสถานการณ์ที่หายากที่โลโก้ของคุณเล็กเกินไป วิธีการตอบสนอง img ไม่ได้คำนึงถึงสิ่งนี้ แต่เราจะทำ ด้วยการเพิ่มคุณสมบัติ "ความสูง" ให้กับ.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>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

แม้ว่าคำถามของคุณน่าสนใจฉันไม่คาดหวังว่าจะมีคำตอบสำหรับคำถามนี้ บางทีคำถามของคุณกว้างเกินไป โซลูชันของคุณควรขึ้นอยู่กับ: เนื้อหาอื่น ๆ ใน navbar (จำนวนรายการ), ขนาดของโลโก้ของคุณ, หากโลโก้ของคุณตอบสนอง ฯลฯ การเพิ่มโลโก้ใน a (ด้วย navbar-brand) ดูเหมือนเป็นจุดเริ่มต้นที่ดี ฉันควรใช้คลาส navbar-brand เพราะจะเป็นการเพิ่มการขยาย (บน / ล่าง) 15 พิกเซล

ฉันทดสอบการตั้งค่านี้ในhttp://getbootstrap.com/examples/navbar/ด้วยโลโก้ขนาด 300x150 พิกเซล

เต็มหน้าจอ> 1200:

ระหว่าง 768 ถึง 992 พิกเซล (เมนูไม่ยุบ):

<768 (เมนูยุบ)

ด้านความงามฉันไม่พบปัญหาทางเทคนิคใด ๆ บนหน้าจอขนาดเล็กโลโก้ขนาดใหญ่จะทับซ้อนหรือแยกวิวพอร์ตออก หน้าจอระหว่าง 768 ถึง 992 พิกเซลก็มีปัญหาอื่นเช่นกันเมื่อเนื้อหาไม่สอดคล้องกันดูตัวอย่าง: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

แถบนำทางเริ่มต้นมีตัวอย่างแถบนำทางเริ่มต้นที่เพิ่มขอบล่างของ 30px ดังนั้นเนื้อหาของแถบนำทางของคุณไม่ควรซ้อนทับเนื้อหาของหน้าเว็บของคุณ (navbars คงที่จะมีปัญหาเมื่อความสูงของ navbar แตกต่างกันไป)

คุณจะต้องมีคำสั่ง css และ media เพื่อปรับ navbar ให้เหมาะกับความต้องการของคุณในขนาดหน้าจอที่แตกต่างกัน โปรดลองคำถามของคุณให้แคบลง อธิบายปัญหาที่คุณพบบน Android

ปรับปรุงดูhttp://bootply.com/77512สำหรับตัวอย่าง

บนหน้าจอขนาดเล็กเช่นโทรศัพท์เมนูที่ยุบจะปรากฏเหนือโลโก้

แลกเปลี่ยนปุ่มและโลโก้ในรหัสของคุณโลโก้ก่อน (ตั้งค่าลอย: เหลืออยู่บนโลโก้)

ไม่มีวิธีจัดแนวรายการเมนูให้เป็นอะไรยกเว้นด้านบน

ตั้งค่าสำหรับmargin-top .navbar-collapse ulใช้ความสูงโลโก้ลบความสูงของแถบนำทางเพื่อจัดตำแหน่งด้านล่างหรือ (ความสูงของโลโก้ - ความสูงของแถบนำทาง) / 2 ถึงกึ่งกลาง

วิธีการสร้าง bootstrap navbar พร้อมโลโก้ซึ่งมีขนาดใหญ่กว่าความสูงเริ่มต้น (50px):

ตัวอย่างที่มีโลโก้ 100px x 100px, CSS มาตรฐาน:

1. คำนวณความสูงและ (padding top + padding bottom) ของโลโก้ ที่นี่120px (ความสูง 100px + ช่องว่างด้านบน (10px) + ด้านล่างช่องว่างภายใน (10px))

2. Goto บูต / ปรับแต่ง ตั้งค่าแทนความสูงของแถบนำทาง 50px> 120px (50 + 70) และnavbar-ยุบ-max-heightจาก 340px ถึง410px (340 + 70) ดาวน์โหลด css

3. ในตัวอย่างนี้ฉันใช้navbarนี้ ในแบรนด์ 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 {padding: 10px; }

5. เพียงพอกับขนาดอื่น ๆ

ตัวอย่าง

ในที่สุดฉันก็มีปัญหาเดียวกันนี้ทำงานนี่คือวิธีแก้ปัญหาของฉันและฉันทดสอบบนเว็บไซต์ของฉันในเบราว์เซอร์หลักทั้งสาม: Chrome, Firefox และ Internet Explorer

ก่อนอื่นถ้าคุณไม่ได้ใช้โลโก้ที่มีข้อความให้ลบ "navbar-brand" ออกไปโดยสิ้นเชิงเนื่องจากฉันพบว่าคลาสนี้เป็นสาเหตุหลักของเมนู nav ที่ยุบตัวของฉันเป็นสองเท่า

ส่งเสียงถึง 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 อาจต้องเปลี่ยนเปอร์เซ็นต์เช่นกันขึ้นอยู่กับขนาดโลโก้ของคุณ ข้อความค้นหา @media แรกควรเป็นเกณฑ์ของคุณและของฉันคือความกว้างของภาพ (368px) + ขนาดของปุ่มยุบ (44px) + ประมาณ 60px และมันออกมาที่ 480px ซึ่งเป็นจุดที่ฉันเริ่มปรับขนาดภาพที่ตอบสนอง

โปรดลบไวยากรณ์มีดโกนของฉันออกจากส่วน HTML แจ้งให้เราทราบหากแก้ไขปัญหาของคุณได้หรือไม่

แก้ไข: ขออภัยฉันพลาดปัญหาความสูง navbar ของคุณ มีสองสามวิธีที่จะไปเกี่ยวกับมันโดยส่วนตัวแล้วฉันรวบรวม Bootstrap น้อยด้วยความสูง navbar ที่เหมาะสมสำหรับวัตถุประสงค์ของฉันฉันใช้ 70px และความสูงของภาพของฉันคือ 68 px วิธีที่สองที่จะทำคืออยู่ในไฟล์ bootstrap.css นั้นค้นหา ".navbar" และเปลี่ยน min-height: เป็นความสูงของโลโก้ของคุณ

โซลูชันของฉันคือเพิ่ม CSS "display: inline-block" ลงในแท็ก img

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

DEMO: jsfiddle

ฉันใช้คลาสที่ตอบสนอง img จากนั้นตั้งค่าความกว้างสูงสุดใน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 ต้องเป็น "โลโก้" ไม่ใช่ navbar-brand

มันขึ้นอยู่กับว่าคุณต้องการให้โลโก้ของคุณสูงขนาดไหน

<a>ความสูงเริ่มต้นใน navbar คือ 20px ดังนั้นหากคุณระบุ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>องค์ประกอบเช่น:

<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มันทำงานได้ดีกับ navbar ในทุกอุปกรณ์ สังเกตุฉันพูดว่าทำงาน "ดี"

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

แนวทางของฉันคือการรวมสี่ภาพที่มีขนาดแตกต่างกันสำหรับโทรศัพท์แท็บเล็ตเดสก์ท็อปเดสก์ท็อปขนาดใหญ่ แต่แสดง ONE โดยใช้คลาสยูทิลิตี้การตอบสนองของ bootstrap ดังต่อไปนี้:

<!--<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 หากคุณไม่ได้ใช้งานเวิร์ดเพรส

แก้ไข Note2: ใช่สิ่งนี้จะเพิ่มคำขอไปยังเซิร์ฟเวอร์ของคุณเมื่อโหลดหน้าเว็บซึ่งอาจช้าลงเล็กน้อย แต่ถ้าคุณใช้เทคนิค css sprite พื้นหลังโอกาสที่โลโก้จะไม่ถูกพิมพ์เมื่อพิมพ์หน้าและรหัสด้านบนควรได้รับ SEO ที่ดีกว่า

คุณไม่จำเป็นต้องเพิ่ม CSS เพิ่มเติมเนื่องจาก Bootstrap3 มีให้ ถ้าคุณไม่ต้องการเพิ่ม นี่คือรหัสของฉันในการใส่โลโก้ไปทางซ้ายและลิงค์ไปทางขวา การนำทางนี้ตอบสนองได้ดี ทำการเปลี่ยนแปลงสิ่งนี้ตามที่เห็นสมควร

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 มันทำงานได้ดีในทุกค่าความกว้าง

.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
}

อีกวิธีคือการใช้คลาสบิวท์อินของ Bootstrap.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-brand ผลลัพธ์จะดูเหมือนภาพโลโก้ที่เหมาะกับแถบนำทางและทำงานเหมือนลิงก์ นอกจากนี้ฉันขอแนะนำให้ใช้คลาส navbar ที่ถูกต้องสำหรับรายการเมนูเพื่อไม่ให้อยู่ใต้โลโก้

<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-brand ดังนั้นจึงมีสองภาพและข้อความ

<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
}

รหัสการทำงานของฉัน - bootstrap 3.0.3 เมื่อ navbar-toggle ภาพโลโก้ต้นฉบับ hidden-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) คุณสามารถเล่นกับสิ่งนี้จนกว่าคุณจะพบว่าเหมาะสมที่สุด วิธีทดสอบที่ง่าย: ใช้ chrome หรือ Firefox พร้อมองค์ประกอบตรวจสอบ ลดขนาดเบราว์เซอร์เท่าที่จะทำได้ สังเกตการเปลี่ยนแปลงขนาดโลโก้ตามความกว้างสูงสุด @media ที่คุณระบุ ทดสอบบน 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>

ความล้มเหลวในการทำให้คำตอบอื่น ๆ ทำงานในกรณีของฉัน (ฉันอาจไม่ผ่านการทดสอบความฉลาด) และหลังจากการทดลองบางอย่างนี่คือสิ่งที่ฉันใช้ (ซึ่งฉันเชื่อว่าใกล้กับค่าเริ่มต้นของ Bootstrap):

   <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>

// อย่าลืมเพิ่ม bootstrap ไว้ในหัวโค้ดของคุณ