पाठ अगले ब्रांड

Question

कैसे मैं बूटस्ट्रैप ब्रांड और समस्त संबद्ध पाठ ब्रांड के रूप में एक साथ इलाज किया जाना है मिलता है?

मैं इस की कोशिश की है:

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <div class="navbar-brand"> 
      <a href="..." ><img class="img-responsive" src="/brand.png")?>"></a> 
      <h3>Ultimate Trade Sizer</h3> 
     </div> 
    </div> 
</nav> 

हालांकि, मैं नहीं मिल सकता है उन्हें गठबंधन किया जाना (कंधे से अर्थात पक्ष)।

कृपया ध्यान दें कि मैं बूटस्ट्रैप 3.

Answer 1

लपेटें छवि एक span

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
      <span><img src="#"/></span> 
      Ultimate Trade Sizer 
     </a> 
    </div> 
</nav> 

span चूक में display: inline

में जोड़ें 210

Answer 2

उपयोग कर रहा हूँ इसका कारण यह है img-responsive वर्ग display:block है क्या हो रहा है: यह नीचे प्रभाव पैदा करता है। इस मामले में मुझे यकीन नहीं है कि आपको उस छवि के लिए उस वर्ग की आवश्यकता है जिसे आप प्रदर्शित कर रहे हैं क्योंकि यह पहले से ही काफी छोटा है और उत्तरदायी होने की आवश्यकता वाले मुद्दों में भाग लेने की संभावना नहीं है।

वैकल्पिक रूप से, आप display:inline-block को इस उदाहरण में img-responsive ओवरराइड और भी अपने h3 जा display:inline-block भी हो सकता था।

Answer 3

सुनिश्चित नहीं हैं कि अगर यह सही एचटीएमएल है, लेकिन मैं एक नया div class में छवि और पाठ लपेटा और कहा कि बाएं जारी। पाठ से अंतरिक्ष के दाईं ओर कुछ पैडिंग के साथ आईएमजी को नई कक्षा में भी बदल दिया। मेरे लिए काम करने के लिए समझा जाता है लेकिन मैं बूटस्ट्रैप के लिए काफी नया हूं इसलिए यह बिल्कुल सही नहीं हो सकता है। आपका कोड इस तरह दिखेगा।

एचटीएमएल

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
      <div class="navbar-brand-name"> 
       <img src="#"/> 
        Ultimate Trade Sizer 
      </div> 
     </a> 
    </div> 
</nav> 

नई सीएसएस वर्ग .navbar ब्रांड वर्ग के अंतर्गत

.navbar-brand-name > { 

    display: inline-block; 
    float: left; 

} 

.navbar-brand-name > img { 
    display: inline-block; 
    float: left; 
    padding: 0 15px 0 0; 
} 

Answer 4

सही समाधान किसी भी अतिरिक्त div या span तत्वों का उपयोग करने h3 और नहीं पर navbar-text उपयोग करने के लिए होगा:

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <div class="navbar-brand"> 
      <a href="..."> 
       <img class="img-responsive" src="/brand.png">"> 
      </a> 
      <h3 class="navbar-text">Ultimate Trade Sizer</h3> 
     </div> 
    </div> 
</nav> 

navbar-text की उचित प्रलेखन के लिए http://getbootstrap.com/components/#navbar-text देखें।