बूटस्ट्रैप 3 नवबार लोगो के साथ

Question

मैं टेक्स्ट ब्रांडिंग के बजाय एक छवि लोगो के साथ बूटस्ट्रैप 3 डिफॉल्ट नावबार का उपयोग करना चाहता हूं। विभिन्न स्क्रीन आकारों के साथ कोई समस्या पैदा किए बिना ऐसा करने का उचित तरीका क्या है? मैं इसे एक सामान्य आवश्यकता मानता हूं, लेकिन मैंने अभी तक एक अच्छा कोड नमूना नहीं देखा है। सभी स्क्रीन आकारों पर स्वीकार्य प्रदर्शन के अलावा एक प्रमुख आवश्यकता है छोटे स्क्रीन पर मेनू की संक्षिप्तता।

मैंने सिर्फ एक टैग के अंदर IMG टैग लगाने की कोशिश की, जिसमें नेवबर-ब्रांड क्लास है, लेकिन इससे मेनू मेरे एंड्रॉइड फोन पर ठीक से काम नहीं कर पाया। मैंने नेवबर क्लास की ऊंचाई बढ़ाने की भी कोशिश की, लेकिन इसने चीजों को और भी खराब कर दिया।

वैसे, मेरी लोगो की छवि नेवबार की ऊंचाई से बड़ी है।

Comments

<img src="logo.png" width="27px" />: समायोजित करें

— उदय हिरवाले

इस प्रश्न के सभी उत्तरों के साथ, उनमें से एक को समाधान के रूप में चिह्नित क्यों नहीं किया गया है?

— क्रिस

दो कारण, मुझे लगता है: 1. यदि कोई साइट को पुनर्स्थापित करता है, तो आयाम सीएसएस के बजाय HTML में तय किया जाता है, इसलिए यह एक रखरखाव दुःस्वप्न बनाता है। 2. क्या यह ऊंचाई = "27px" नहीं होना चाहिए? यह ऊँचाई है, चौड़ाई नहीं, यही बाधा है।

— कैन डिक

चौड़ाई और ऊँचाई-विशेषता दोनों ही पिक्सेल में उनके मान को मानते हैं, इसलिए आपको gthe मान में 'px' नहीं जोड़ना चाहिए। width="27"

— jmmeijer

सभी बातों पर विचार किया गया, यह सबसे अच्छा उत्तर है और इसे stackoverflow.com/a/26333342/171456 स्वीकार किया जाना चाहिए । यह 2013 से इस सवाल का दौरा करने वाले व्यापक एसओ समुदाय की आवश्यकता को पूरा करता है।

— Zim

Answer 1

हर कोई इसे कठिन तरीके से करने की कोशिश क्यों कर रहा है? निश्चित रूप से, इनमें से कुछ दृष्टिकोण काम करेंगे, लेकिन वे आवश्यकता से अधिक जटिल हैं।

ठीक है, पहले - आपको एक छवि की आवश्यकता है जो आपके नावबार के भीतर फिट होगी। आप अपनी छवि को css ऊंचाई विशेषता (चौड़ाई को स्केल करने की अनुमति) के माध्यम से समायोजित कर सकते हैं या आप बस एक उचित आकार की छवि का उपयोग कर सकते हैं। आप जो भी करने का फैसला करते हैं - यह दिखने का तरीका इस बात पर निर्भर करेगा कि आप अपनी छवि को कितनी अच्छी तरह से आकार देते हैं।

किसी कारण के लिए, हर कोई एंकर के साथ छवि को चिपकाना चाहता है navbar-brand, और यह आवश्यक नहीं है। navbar-brandउन पाठ शैलियों को लागू करता है जो एक छवि के लिए आवश्यक नहीं हैं, साथ ही navbar-leftवर्ग (बस पुल-लेफ्ट की तरह, लेकिन एक नेवबार में उपयोग के लिए)। आप सभी को वास्तव में जोड़ना है navbar-left।

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

आप इसे एक नेवबर-ब्रांड आइटम के साथ भी अनुसरण कर सकते हैं, जो छवि के दाईं ओर दिखाई देगा।

Comments

: मैं कारण है कि लोगों को एक लंगर टैग के अंदर छवि डाल beacause कि कैसे बूटस्ट्रैप डॉक यह करता है लगता है getbootstrap.com/components/#navbar-brand-image

— cafonso

क्या होगा यदि आप एक बड़ी छवि का उपयोग करना चाहते हैं?

— स्टीवनप

@ कैफोंसो - मैं यह नहीं कह रहा हूं कि यह एक एंकर में नहीं है - सिर्फ इतना है कि एंकर को "नेवबर-ब्रांड" क्लास की जरूरत नहीं है। जब वह वर्ग मौजूद होता है - यह वास्तव में छवियों को प्रदर्शित करने के तरीके के साथ खिलवाड़ करता है।

— माइकल

@ कैफोंसो एक शानदार बिंदु बनाता है। मेरा मानना ​​है कि TWBS ने इसे एक छवि या पाठ के लिए उपयोग करने का इरादा किया। और यह देखते हुए कि कितने लोगों को इससे परेशानी हुई है, यह एक संकेत होना चाहिए कि यह समय है कि वे इसे ठीक करें या इसे अपने डॉक्स में स्पष्ट करें।

— ब्रायन विलिस

@ मिचेल, आधिकारिक बूटस्ट्रैप प्रलेखन उदाहरण कक्षा के साथ एंकर दिखाते हैं navbar-brand। यह भ्रम का स्रोत है।

— जस्टिन स्काइल्स

Answer 2

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

Comments

इसके लिए नकारात्मक मार्जिन क्या है?

— आयुध

नकारात्मक मार्जिन ने मेरे लिए इसे लंबवत केंद्र में मदद की।

— शब्द जारेड

एडवर्ड की टिप्पणी के बाद ... या कम से कम एक कार्यशील डेमो

— मैटिस कान्पेपा

आपको नकारात्मक मार्जिन के साथ खिलवाड़ नहीं करना चाहिए (जब तक कि छवि मजाकिया नहीं हुई थी)। इस तरह यह एक ध्वनि समाधान नहीं है क्योंकि यह पूरी तरह से लोगो के आकार पर निर्भर करता है और इसे केस के आधार पर एक मामले में समायोजित करना होगा। यहाँ इस पद्धति का एक कार्यशील डेमो है ।

— ब्रायन विलिस

एक बेहतर विकल्प जो लगातार काम करेगा कोई फर्क नहीं पड़ता है लोगो का आकार / राशन ऐसा करना है जो .img- उत्तरदायी इसे उल्टा करने के अलावा करता है। चूँकि .navbar-brand फ्लोट किया गया है: बायाँ लगाया हुआ यह एक ब्लॉक एलिमेंट बन गया है और क्योंकि इसमें 50px की ऊँचाई है, हम इमेज की अधिकतम-ऊँचाई को 100% तक सेट कर सकते हैं; और यह कभी भी ओवरफ्लो नहीं करेगा या पूरे नावबार के बढ़ने का कारण नहीं होगा। यह .navbar- ब्रांड ऊंचाई के लिए विवश हो जाता है। यदि यह डिफ़ॉल्ट 50px नावबार में बहुत छोटा दिखता है तो .navbar-brand> img टॉप और बॉटम पैडिंग को समायोजित करें। यहाँ काम कर रहे डेमो के साथ पूरा जवाब है

— ब्रायन विलिस

Answer 3

कई परीक्षाओं के साथ पूरा डेमो

महत्वपूर्ण अद्यतन: 12/21/15

वर्तमान में मोज़िला में एक बग है जो मुझे पता चला है कि इस पृष्ठ पर मैमी डेमोस के साथ कुछ ब्राउज़र चौड़ाई पर नेवबार को तोड़ता है । मूल रूप से मोज़िला बग, छवि चौड़ाई के हिस्से के रूप में नेवबर ब्रांड लिंक पर बाएँ और दाएँ पैडिंग सहित है। हालाँकि, यह आसानी से तय किया जा सकता है और मैंने इसका परीक्षण किया है और मुझे पूरा यकीन है कि यह इस पृष्ठ पर सबसे स्थिर कार्य उदाहरण है। यह स्वचालित रूप से आकार बदल जाएगा और सभी ब्राउज़रों पर काम करेगा।

बस इसे अपने सीएसएस में जोड़ें और आप जिस तरह से करेंगे उसी तरह से नेवबर-ब्रांड का उपयोग करें .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;
}

---

मूल ANSWER BELOW (केवल संदर्भ के लिए)

लोग ऑब्जेक्ट-फिट के बारे में भूलने लगते हैं। व्यक्तिगत रूप से मुझे लगता है कि इसके साथ काम करना सबसे आसान है क्योंकि छवि स्वचालित रूप से मेनू आकार में समायोजित हो जाती है। यदि आप छवि पर ऑब्जेक्ट फिट का उपयोग करते हैं तो यह मेनू ऊंचाई पर ऑटो आकार देगा।

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

यह इंगित किया गया था कि यह IE में काम नहीं करता है "अभी तक"। एक पॉलीफ़िल है , लेकिन अगर आप इसे किसी और चीज़ के लिए इस्तेमाल करने की योजना नहीं बनाते हैं तो यह अत्यधिक हो सकता है। ऐसा लगता है कि IE के भविष्य के रिलीज के लिए ऑब्जेक्ट-फिट की योजना बनाई जा रही है ताकि एक बार ऐसा हो जाए कि यह सभी ब्राउज़रों में काम करेगा।

हालाँकि, यदि आप बूटस्ट्रैप में .img- उत्तरदायी वर्ग को नोटिस करते हैं, तो अधिकतम-चौड़ाई यह मान रही है कि आप इन चित्रों को स्तंभों या किसी ऐसी चीज़ में लगा रहे हैं, जिसमें सेट के साथ स्पष्टता है। इसका मतलब यह होगा कि 100% विशेष रूप से मूल तत्व की 100% चौड़ाई का मतलब है।

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

नौसर के साथ हम इसका उपयोग नहीं कर सकते क्योंकि माता-पिता (.navbar- ब्रांड) की ऊंचाई 50px है, लेकिन चौड़ाई निर्धारित नहीं है।

यदि हम उस तर्क को लेते हैं और उसे प्रासंगिकता के आधार पर उलट देते हैं, तो हम एक उत्तरदायी छवि रख सकते हैं जो कि .navbar- ब्रांड की ऊँचाई तक पहुँच जाती है और जोड़कर और ऑटो सेट की चौड़ाई के अनुपात में समायोजित हो जाती है।

max-height: 100%;
width: auto;

आमतौर पर हमें display:block;परिदृश्य में जोड़ना होगा , लेकिन चूंकि नेवबर-ब्रांड में पहले से ही फ्लोट है: बाएं; उस पर लागू, यह स्वचालित रूप से एक ब्लॉक तत्व के रूप में कार्य करता है।

---

आप उस दुर्लभ स्थिति में भाग सकते हैं जहाँ आपका लोगो बहुत छोटा है। 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>

डेमो http://codepen.io/bootstrapped/pen/KwYGwq

Comments

धन्यवाद जोस। यह IE में काम नहीं करता है जिसे मैं अब तक कभी नहीं जानता था। मैंने आपकी टिप्पणी से उत्तर को संपादित किया। इसके अलावा, अगर ऊंचाई और अधिकतम ऊंचाई दोनों आवश्यक हैं, तो मुझे यकीन नहीं है।

— ब्रायन विलिस

ज़रूर! ऑब्जेक्ट-फिट वेबकिट / ब्लिंक इंजन से बकाया परिवर्धन में से एक रहा है। आशा है कि अन्य ब्राउज़र उन्हें जल्द ही एकीकृत करेंगे! इस बीच हम कड़ी मेहनत करने के लिए पृष्ठभूमि छवियों का उपयोग करेंगे!

— जोस ए

हे जोस वास्तव में अभी कुछ पता लगा। नए डेमो की जाँच करें। यह वास्तव में ऐसा लगता है जैसे मेरा मूल उत्तर ऑब्जेक्ट के फिट होने के कारण नहीं बल्कि ऊँचाई और अधिकतम ऊँचाई के कारण अन्य सभी ब्राउज़रों में काम कर रहा था। मुझे लगता है कि यह सब वास्तव में आवश्यक है ... क्या आप ऐसी स्थिति पा सकते हैं जहां ऊपर अब काम नहीं करेगा?

— ब्रायन विलिस

मुझे नहीं लगता कि ऑब्जेक्ट फिट होना आवश्यक है क्योंकि अधिकतम ऊंचाई और ऊंचाई कंटेनर की ऊँचाई के समान है ।img- उत्तरदायी होगा।

— ब्रायन विलिस

जोस आपको लगता है कि वस्तु फिट भी कुछ भी कर रही है? मैं सोच रहा हूं कि हम इसे इस मामले में छोड़ सकते हैं, लेकिन मुझे यकीन नहीं है?

— ब्रायन विलिस

Answer 4

यद्यपि आपका प्रश्न दिलचस्प है, मुझे उम्मीद नहीं है कि इसके लिए एक उत्तर होगा। हो सकता है कि आपका प्रश्न बहुत व्यापक हो। आपका समाधान इस पर निर्भर होना चाहिए: नावबार में अन्य सामग्री (आइटमों की संख्या), आपके लोगो के आकार, आपके लोगो को प्रतिक्रियाशील होना चाहिए, आदि (नावबार-ब्रांड के साथ) में लोगो जोड़ना एक अच्छा प्रारंभिक बिंदु लगता है। मुझे नेवबर-ब्रांड वर्ग का उपयोग करना चाहिए क्योंकि इससे 15 पिक्सेल की पैडिंग (ऊपर / नीचे) जुड़ जाएगी।

मैं पर इस सेटिंग का परीक्षण http://getbootstrap.com/examples/navbar/ 300x150 पिक्सल के लोगो के साथ।

पूर्ण स्क्रीन> 1200:

768 और 992 पिक्सेल के बीच (मेनू ध्वस्त नहीं हुआ):

<768 (मेनू ढह गया)

सौंदर्य संबंधी पहलुओं के अलावा मुझे कोई तकनीकी समस्या नहीं मिली। छोटे स्क्रीन पर एक बड़ा लोगो व्यूपोर्ट को ओवरलैप या तोड़ देगा। जब सामग्री एक पंक्ति में फिट नहीं होती है तो 768 और 992 पिक्सेल के बीच की स्क्रीन में अन्य समस्याएं भी होती हैं, उदाहरण के लिए देखें: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

डिफ़ॉल्ट नावबार है डिफ़ॉल्ट नावबार उदाहरण 30px का निचला-मार्जिन जोड़ता है इसलिए आपके नावबार की सामग्री को आपके पृष्ठ की सामग्री को कभी भी ओवरलैप नहीं करना चाहिए। (तय की गई नाविकों को समस्या तब होगी जब नावबार की ऊंचाई अलग-अलग होगी)।

अलग स्क्रीन आकार पर अपनी आवश्यकता के लिए नेबर को अनुकूलित करने के लिए आपको कुछ सीएसएस और मीडिया प्रश्नों की आवश्यकता होगी। कृपया अपने प्रश्न को छोटा करने का प्रयास करें। Android पर आपको मिली समस्या का वर्णन करें।

अद्यतन एक उदाहरण के लिए http://bootply.com/77512 देखें ।

एक फोन जैसी छोटी स्क्रीन पर, ध्वस्त मेनू लोगो के ऊपर दिखाई देता है

बटन और लोगो को अपने कोड में बदलें, लोगो पहले (सेट फ्लोट: लोगो पर छोड़ दिया गया)

शीर्ष के अलावा कुछ भी मेनू आइटम संरेखित करने का कोई तरीका नहीं है

के margin-topलिए निर्धारित करें .navbar-collapse ul। नीचे तक या (लोगो की ऊँचाई - नावबार ऊँचाई) / 2 से केंद्र में संरेखित करने के लिए, लोगो की ऊँचाई माइनस नौबेर ऊँचाई का उपयोग करें

Comments

मैंने इस विकल्प की कोशिश की। इसके साथ दो समस्याएं हैं: 1) एक फोन जैसी छोटी स्क्रीन पर, टूटा हुआ मेनू लोगो के ऊपर दिखाई देता है (भले ही मैं img-उत्तरदायी वर्ग को लोगो img टैग में जोड़ता हूं) और 2) मेनू को संरेखित करने का कोई तरीका नहीं है। शीर्ष को छोड़कर कुछ भी आइटम। कोई अन्य समायोजन ध्वस्त मेनू को सही ढंग से कार्य नहीं करने का कारण होगा।

— चरण 11

Answer 5

निर्देश दें कि एक बूटस्ट्रैप नावबार कैसे बनाया जाए, जो डिफ़ॉल्ट ऊंचाई (50px) से बड़ा हो।

एक लोगो के साथ उदाहरण 100px x 100px, मानक CSS:

1. लोगो की ऊँचाई और (पैडिंग टॉप + पेडिंग बॉटम) की गणना करें। यहां 120px (100px ऊंचाई + पैडिंग टॉप (10px) + पैडिंग बॉटम (10px))

2. गोटो बूटस्ट्रैप / अनुकूलित । इसके बजाय नावबार की ऊंचाई 50px> 120px (50 + 70) और नावबार -पतन-अधिकतम-ऊंचाई 340px से 410px (340 + 70) निर्धारित करें । डाउनलोड सीएसएस।

3. इस उदाहरण में मैं इस नावबार का उपयोग करता हूं । में नेवबार ब्रांड :

     <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. सीएसएस जोड़ें

   .myLogo {पैडिंग: 10 पीएक्स; }

5. अन्य आकारों में पर्याप्त।

उदाहरण

Comments

सबसे समझदार समाधान यहाँ। अंगूठे

— उपयोक्ता 3718908

यह स्वीकृत उत्तर होना चाहिए। यह छवि को फिट करने के लिए नवबार को आकार देने के मुद्दे को हल करता है।

— ग्रेग गम

Answer 6

खैर मुझे आखिरकार यही समस्या काम कर रही है, यहाँ मेरा समाधान है और मैंने इसे अपनी साइट पर तीनों प्रमुख ब्राउज़रों: क्रोम, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर में परीक्षण किया है।

सबसे पहले यदि आप एक पाठ आधारित लोगो का उपयोग नहीं कर रहे हैं, तो "नेवबर-ब्रांड" को पूरी तरह से हटा दें क्योंकि मैंने इस विशेष वर्ग को मेरे ढह गए नव-मेनू के मुख्य कारण को दोगुना करने के लिए पाया।

मुझे सही दिशा में ले जाने के लिए 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>

और सीएसएस कोड:

.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 भागों से मेरे रेजर सिंटैक्स को निकालना सुनिश्चित करें। मुझे पता है कि यह आपकी समस्या को ठीक करता है, यह मेरा तय किया।

संपादित करें: क्षमा करें, मुझे आपका नेबर हाइट मुद्दा याद आ गया। इसके बारे में जाने के लिए कुछ तरीके हैं, व्यक्तिगत रूप से मैं बूटस्ट्रैप लेस को उपयुक्त नौबार ऊंचाई के साथ संकलित करता हूं, मेरे उद्देश्यों के लिए मैं 70 पीएक्स का उपयोग करता हूं, और मेरी छवि की ऊंचाई 68 पीएक्स है। इसे करने का दूसरा तरीका बूटस्ट्रैप है। फाइल अपने आप में है, ".navbar" की खोज करें और न्यूनतम ऊंचाई बदलें: अपने लोगो की ऊंचाई तक।

Comments

यह असली जवाब है

— स्टीवनप

कक्षा को हटाकर navbar-brandमेरे लिए किया।

— काई हार्टमैन

Answer 7

मेरा समाधान टैग टैग करने के लिए css "डिस्प्ले: इनलाइन-ब्लॉक" है।

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

DEMO: jsfiddle

Answer 8

मैं img-उत्तरदायी वर्ग का उपयोग करता हूं और फिर aतत्व पर अधिकतम-चौड़ाई सेट करता हूं । ऐशे ही:

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

और सीएसएस:

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

Comments

मेरा मानना ​​है कि इसका मतलब है कि आप सेट के बाद से <a>टैग के बजाय अपने टैग में छवि की चौड़ाई सेट कर रहे हैं । क्या आप बता सकते हैं कि यह कैसे सहायक है? <img>img-responsivemax-width="100%"

— माइकल शेपर

माइकल एक अच्छा बिंदु लाता है। .image-responsiveछवि के स्पष्ट कंटेनर WIDTH के आधार पर आकार बदलने वाली छवि के लिए है, न कि ऊँचाई जो चौड़ाई के आधार पर आकार बदलता है। तो इसके बावजूद कितने उत्थान हुए हैं, यह यहाँ काम नहीं करता है । हालांकि, हम उसी विधि का उपयोग कर सकते हैं जो छवि उत्तरदायी करती है और इसे ऊंचाई तक लागू करती है। तो समीकरण से .img- रिस्पॉन्सिबल को हटा दें और बस नेवर-ब्रांड को अधिकतम-ऊँचाई सेट करें । मेरा जवाब यहां देखें ।

— ब्रायन विलिस

Answer 9

आपको इस रूप में कोड का उपयोग करना चाहिए:

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

ए टैग का क्लास "लोगो" होना चाहिए न कि नेबर-ब्रांड।

Answer 10

यह निर्भर करता है कि आप अपने लोगो को कितना लंबा चाहते हैं।

नावबार <a>में डिफ़ॉल्ट ऊंचाई 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>

Answer 11

त्वरित फिक्स : अपने लिए एक कक्षा बनाएं logoऔर सेट heightकरने के लिए 28px। यह सभी उपकरणों पर नावबार के साथ अच्छी तरह से काम करता है। सूचना मैंने कहा कि काम करता है "वेल"।

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

Answer 12

मेरा दृष्टिकोण फोन, टैबलेट, डेस्कटॉप, बड़े डेस्कटॉप के लिए विभिन्न आकारों की चार अलग-अलग छवियों को शामिल करना है, लेकिन केवल बूटस्ट्रैप के उत्तरदायी उपयोगिता वर्गों का उपयोग करके एक ही दिखाएँ, जैसा कि निम्नलिखित है:

<!--<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 को संपादित करें: हां, यह पृष्ठ लोड करते समय आपके सर्वर से अनुरोध करता है जो थोड़ा धीमा हो सकता है लेकिन यदि आप एक पृष्ठभूमि सीएसएस स्प्राइट तकनीक का उपयोग करते हैं, तो संभावना है कि एक पेज प्रिंट करते समय लोगो मुद्रित नहीं होता है और ऊपर कोड प्राप्त करना चाहिए बेहतर एसईओ।

Comments

आप एक एकल <a> का उपयोग कर सकते हैं और बस 4 अलग <img>, प्रत्येक आकार के लिए एक।

— जोनाथन वानास्को

@ जोनाथन वानास्को, मुझे यह देखने में दिलचस्पी होगी कि आप ऐसा कैसे करेंगे

— AdRock

टैग visible-SIZEसे निकालें a, और इसे img टैग पर रखें। <a class="navbar-brand"><img class="visible-xs"/><img class="visible-sm"/></a>

— जोनाथन वानास्को

Answer 13

आपको अतिरिक्त 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>

Answer 14

मैं इसे 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
}

Answer 15

एक और तरीका बूटस्ट्रैप की अंतर्निहित .text-hideकक्षा को लागू करना है.navbar-brand एक पृष्ठभूमि छवि के साथ ब्रांड पाठ / सामग्री को बदलने के लिए।

सीएसएस:

.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 चौड़ाई क्योंकि ऊंचाई पहले से ही निर्धारित है।

यहाँ एक लाइव डेमो है

Answer 16

मुझे भी यही समस्या थी। मैंने इसे इस तरह हल किया:

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

कोई नेवबर-ब्रांड वर्ग नहीं है। परिणाम लोगो की तस्वीर की तरह दिखता है जो नावबार में फिट बैठता है और लिंक की तरह काम करता है। इसके अलावा, मैं मेनू आइटमों के लिए नेबर-राइट क्लास का उपयोग करने की सलाह देता हूं ताकि वे लोगो से नीचे न जाएं।

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

Answer 17

शायद यह बहुत आसान है, लेकिन मैंने सिर्फ नेवबर-ब्रांड लाइन की नकल की है, इसलिए उनमें से दो हैं, छवि और फिर पाठ।

<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 ऊंचाई)।

Answer 18

LESS का उपयोग करने पर, यह काम करता है:

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

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

Answer 19

यदि आप ब्रांड को देखने और टूलबार में ऑटो चौड़ाई के साथ देखने की आवश्यकता है, तो यह कोड सही काम करता है। इसमें सही फ़ाइल से छवि फ़ाइल प्राप्त करने के लिए 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">

Answer 20

निम्न को .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
}

Answer 21

मेरा काम कोड - बूटस्ट्रैप 3.0.3। जब नेवबार-टॉगल, छिपी-एक्स मूल लोगो छवि।

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

Answer 22

आप नीचे दिए गए जैसे @media क्वेरी का उपयोग करने का प्रयास कर सकते हैं।

पहले एक लोगो वर्ग जोड़ें, फिर अपने लोगो की ऊंचाई और डिवाइस आकार के अनुसार चौड़ाई निर्दिष्ट करने के लिए @media का उपयोग करें। नीचे दिए गए उदाहरण में, मैं उन उपकरणों को लक्षित कर रहा हूं, जिनकी अधिकतम चौड़ाई 320px (iPhone) है, आप इसके चारों ओर तब तक खेल सकते हैं जब तक आपको सबसे अच्छा फिट न मिले। परीक्षण करने का आसान तरीका: निरीक्षण तत्व के साथ क्रोम या फ़ायरफ़ॉक्स का उपयोग करें। जहाँ तक संभव हो अपने ब्राउज़र को सिकोड़ें। आपके द्वारा निर्दिष्ट @media अधिकतम चौड़ाई के आधार पर लोगो आकार परिवर्तन का निरीक्षण करें। वांछित परिणाम प्राप्त करने के लिए iPhone, Android उपकरणों, iPad आदि पर परीक्षण करें।

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

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

Answer 23

कृपया निम्नलिखित कोड का प्रयास करें:

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

Answer 24

मेरे मामले में अन्य उत्तरों में से कोई भी काम करने में विफल (मैं शायद खुफिया परीक्षा पास नहीं किया था) और कुछ प्रयोग के बाद, यह वही है जो मैं उपयोग कर रहा हूं (जो मुझे विश्वास है कि बूटस्ट्रैप डिफ़ॉल्ट के बहुत करीब है):

   <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>उस स्थिति में कोई टैग नहीं ) से प्रतिस्थापित करें ।

Answer 25

यह शब्दार्थ नहीं है, लेकिन मैं अभी मौजूदा का उपयोग करता हूं a तत्व का , पृष्ठभूमि छवि सेट करता , फिर @ 2x संकल्प, छोटे स्क्रीन आकार आदि के लिए कई विविधताएं बनाता ।

फिर, आप .text-hideol 'फैशन तरीके से पेज पर कुछ टेक्स्ट प्राप्त करने के लिए क्लास का उपयोग कर सकते हैं । सरल और प्रभावी हालांकि किसी छवि का उचित उपयोग नहीं है।

यहाँ पाठ-प्रतिस्थापन के लिए सहायक वर्ग का लिंक दिया गया है:

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

Answer 26

इस प्रश्न का सबसे आसान और सबसे अच्छा उत्तर यह है कि आपके लोगो के आधार पर अधिकतम चौड़ाई और ऊँचाई निर्धारित की जाए, छवि अधिकतम 50px ऊँची होगी लेकिन 200px से अधिक नहीं होगी।

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

यह आपके लोगो के आकार और आपके पास मौजूद नौसेना बार आइटम के आधार पर अलग-अलग होगा।

Answer 27

<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 यह मेरा ड्राफ्ट कोड है और इसका पहले से काम कर रहा है :) यहाँ स्क्रीनशॉट है।

Answer 28

पाठ ब्रांडिंग को बदलने के बजाय, मैंने नीचे दिए गए कोड की तरह दो पंक्तियों में विभाजित किया और 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" -->

और इसके अलावा, मैंने निम्नलिखित सीएसएस कोड जोड़े ......

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

अगर मेरा कोड आपकी समस्या को हल करता है, तो यह मेरी खुशी है ....।

Answer 29

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

// अपने कोड के सिर में बूटस्ट्रैप जोड़ना मत भूलना।