बूटस्ट्रैप की घटती ऊंचाई 3.0 नावबार

Question

मैं बूटस्ट्रैप 3.0 नावबार की ऊंचाई को कम करने की कोशिश कर रहा हूं, जिसका उपयोग निश्चित शीर्ष व्यवहार के साथ किया जाता है। यहाँ मैं कोड का उपयोग कर रहा हूँ।

एचटीएमएल

<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner-sm">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav pull-right">
        <li class="active">
          <a href="../getting-started">Getting started</a>
        </li>
        <li>
          <a href="../css">Ext01</a>
        </li>
        <li>
          <a href="../components">Language</a>
        </li>
        <li>
          <a href="../javascript">My Account</a>
        </li>
        <li>
          <a href="../customize">Sign Out</a>
        </li>
      </ul>
    </nav>
  </div>
    </div>
</div>

सीएसएस

.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}

परिणाम

स्क्रीन से यह पता चलता है, आउटपुट में नेव बार कम हुआ लेकिन ऊंचाई कम नहीं हुई। मूल ऊंचाई गुलाबी रंग में दिखाई गई है।

ऊपर css स्क्रिप्ट बूटस्ट्रैप 2 में लगभग अच्छी तरह से काम करती है। * *

क्या ऊंचाई को ठीक से कम करने का कोई तरीका है।

Comments

बूटस्ट्रैप 3 में <div class = "navbar-inner"> की कोई आवश्यकता नहीं है

— बार्टेक एस

नेवबर-इनर मेरी कस्टम क्लास है। बूटस्ट्रैप 3.0 से संबंधित नहीं है।

— इरफानमस्कड

मेरे लिए काम करने का एकमात्र तरीका इस लिंक पर बताया गया है: stackoverflow.com/questions/19576175/… यह कोड की सिर्फ दो पंक्तियों के साथ नौबेर की ऊँचाई कम हो जाती है

— giovannim

Answer 1

कुछ घंटे बिताने के बाद, निम्नलिखित सीएसएस वर्ग को जोड़ने से मेरा मुद्दा ठीक हो गया।

बूटस्ट्रैप 3.0 के साथ काम करें। *

.tnav .navbar .container { height: 28px; }

बूटस्ट्रैप 3.3.4 के साथ काम करें

.navbar-nav > li > a, .navbar-brand {
    padding-top:4px !important; 
    padding-bottom:0 !important;
    height: 28px;
}
.navbar {min-height:28px !important;}

स्क्रीनशॉट के साथ नेवबार की ऊंचाई को अनुकूलित और कम करने के लिए पूरा कोड अपडेट करें।

सीएसएस:

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

उपयोग कोड:

<div class="navbar-xs">
   <div class="navbar-primary">
       <nav class="navbar navbar-static-top" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                 <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="#">Brand</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                   <li><a href="#">Link</a></li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
  </div>
</div>

Comments

यह काम नहीं करता ... इस पृष्ठ पर मेरे उत्तर की जांच करें ... .navbar के लिए न्यूनतम ऊंचाई डिफ़ॉल्ट रूप से 50px पर सेट है, इसलिए यदि आप ऊँचाई को 28px पर सेट करते हैं तो यह 50px मिनट की ऊँचाई से ओवरराइड हो जाएगा। ..

— पैट्रिक

आह, मुझे लगता है कि इस पोस्ट को संपादित किया गया था (बहुत कुछ!) और अब वास्तव में सही कोड दिखाता है। मैं अपनी पोस्ट में यहां सुझाई गई न्यूनतम ऊंचाई को भी देखता हूं कि किसी कारण से डाउन वोट मिला। यह बहुत ही एक जवाब है कि सही है ... विषय पर और स्पष्ट, पर downvoted मिलना निराशाजनक है

— पैट्रिक

@पैट्रिक का मतलब यह नहीं है कि आपका क्या मतलब है, लेकिन उस समय मेरे मुद्दे का समाधान मेरे ही जवाब से हुआ। प्रतिष्ठा का कोई सवाल नहीं है, अगर लोग मुझे वोट देते हैं या नीचे।

— irfanmcsd

स्रोत को संपादित करने से यह आसान हो जाएगा

— ल्यूक

मज़ेदार, ये मेरे काम नहीं आए। मुझे 50px की निश्चित ऊंचाई को ओवरराइड करना पड़ा;

— केविन

Answer 2

काम कर समाधान:

डिफ़ॉल्ट रूप से बूटस्ट्रैप 3.0 में ऊपर और नीचे 15px पैडिंग है, इसलिए हमें इसे ओवरराइड करने की आवश्यकता है!

उदाहरण के लिए:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

Comments

डिफ़ॉल्ट बूटस्ट्रैप में 10px है। पीसी? .navbar-nav> li> a {पेडिंग-टॉप: 10px; पैडिंग-बॉटम: 10 पीएक्स; लाइन-ऊँचाई: 20 पीएक्स; }

— जीची

Bootstrap.css (v3.0.2) में लाइन नंबर 3884 देखें। यह .navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}डिफ़ॉल्ट रूप से है।

— रणवीर

V3.0.2 के बारे में निश्चित नहीं है। लेकिन v3.0.3 लाइन में 4545 bootstrap.css में, यह है: .navbar-nav> li> a {padding-top: 10px; पैडिंग-बॉटम: 10 पीएक्स; लाइन-ऊँचाई: 20 पीएक्स; }

— जीची

आप, सर, मेरे हीरो हैं।

— orokusaki

Answer 3

बस इस तरह से .navbar में निर्धारित मिन-ऊंचाई को ओवरराइड करें:

.navbar{
  min-height:20px; //* or whatever height you require
}

न्यूनतम-ऊंचाई से कुछ छोटा करने के लिए तत्वों की ऊँचाई को बदलने से कोई फर्क नहीं पड़ेगा ...

Comments

जैसा कि आप नावबार में देखते हैं कि मैं पहले से ही ऊंचाई की संपत्ति का उपयोग करता हूं लेकिन कोई प्रभाव नहीं है।

— irfanmcsd

यह न्यूनतम ऊंचाई वाली संपत्ति है, ऊँचाई नहीं ... यदि आप ऊँचाई को न्यूनतम ऊंचाई से कम संख्या पर सेट करते हैं, तो न्यूनतम ऊंचाई ऊँचाई को छोटा होने से रोक देगी ...

— patrick

ऐसा क्यों होता है? यह इस पोस्ट में सेट समस्या के लिए एक काम कर समाधान है। क्या कोई मॉडरेटर इस पर गौर कर सकता है, ऐसा लगता है कि एक डाउनवॉटर है जो सामान को नीचे गिरा देता है, वह वास्तविक उत्तर की जांच के बिना सहमत नहीं है। मेरी पोस्ट का एक ही जवाब देने के 2.5 महीने बाद एक लिंक पोस्ट किया गया, जो बाहरी लिंक पर है, और दो अपवोट मिला है। मैं इसे नफरत करता हूं जब लोग यादृच्छिक डाउनवोट्स के साथ एसओ को पतला करते हैं!

— पैट्रिक

मैं अक्सर खुद से पूछता था कि अब लोगों को कैसे नीचा दिखाना है, क्या आपको एक सूचना मिलती है? नहीं मेटा पर इस मिल सका

— युलिआन Onofrei

कोई सूचना नहीं ... ऐसा लगता है कि लोग यह सोचते हैं कि यदि वे एक और उत्तर बेहतर या कुछ और सोचते हैं तो मुझे देना होगा ... मुझे नहीं पता ... इस मामले में सवाल पूछने वाले ने मेरे जवाब को अपने जवाब में ले लिया और उस उत्तर को स्वीकार कर लिया। अगर आप मुझसे पूछें तो लंगड़ा होगा ... लेकिन फिर से, यह साइट अहंकार के बारे में नहीं है, यह दूसरों की मदद करने के बारे में है ...

— पैट्रिक

Answer 4

यदि आप कम स्रोत का उपयोग कर रहे हैं, तो variables.lessफ़ाइल में नावबार की ऊँचाई के लिए एक चर होना चाहिए । यदि आप स्रोत का उपयोग नहीं कर रहे हैं, तो आप इसे कस्टमाइज्ड उपयोगिता का उपयोग करके अनुकूलित कर सकते हैं जो बूटस्ट्रैप की साइट प्रदान करती है। और फिर आप इसे डाउनलोड कर सकते हैं और इसे अपने प्रोजेक्ट में शामिल कर सकते हैं। आप जिस चर की तलाश कर रहे हैं, वह है:@navbar-height

Comments

लेकिन मैं मूल नौसेना बार व्यवहार को बदलना नहीं चाहता। मैं सिर्फ अतिरिक्त शीर्ष नौसेना बार के लिए ऊंचाई बदल रहा हूं।

— irfanmcsd 19

मुझे लगता है कि यह सबसे अच्छा समाधान है।

— इम्तियाज

यह इस सबसे अच्छा समाधान है यदि आपके पास साइट पर केवल एक नौसेना है और यह उस ऊंचाई पर होना चाहिए। यदि आपके पास कई नौसेनाएं हैं, तो यह थोड़ा कठिन हो जाता है, क्योंकि .navbar-vertical-align कई स्थानों पर उपयोग किया जाता है और इसमें @ navbar-height का कठिन संदर्भ होता है।

— कार्ल बुसिमा

अच्छा समाधान। जब तक आप

— eagor

जब तक आप सेपरेट में ओवरराइड्स का उपयोग करते हैं तब तक आंशिक रूप से यह सबसे अच्छा समाधान है और आपको बिना किसी समस्या के बूटस्ट्रैप को अपग्रेड करने की अनुमति देनी चाहिए।

— केन प्रिंस

Answer 5

यह मेरा अनुभव है

 .navbar { min-height:38px;   }
 .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #A40303;}

Comments

.Navbar-form की देखभाल के लिए इसे जोड़ें:.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }

— steph643

एक और विस्तार: .navbar .navbar-text {मार्जिन-टॉप: 0px; मार्जिन-नीचे: 0px; लाइन-ऊँचाई: 38px; }

— cnnuc

Answer 6

यदि आप लोग LESS / SASS के साथ अपनी स्टाइलशीट तैयार कर रहे हैं और वहां बूटस्ट्रैप का आयात कर रहे हैं, तो मैंने पाया है कि @ navbar-height वैरिएबल आपके नेबर की ऊंचाई सेट करने देता है, जो मूल रूप से variables.less फ़ाइल में परिभाषित किया गया है।

Answer 7

अपने 2 पेंस को जोड़ना चाहता था और अपने मूल जवाब के लिए जेम्स पॉल्स को धन्यवाद देता था कि यह एकमात्र ऐसा था जिसने मेरे विशेष प्रोजेक्ट (MVC 5 को बूटस्ट्रैप 3 के नवीनतम संस्करण के साथ) के लिए काम किया था।

यह ज्यादातर शुरुआती के लिए है, स्पष्टता के लिए और भविष्य के संपादन को आसान बनाने के लिए, मेरा सुझाव है कि आप अपने सीएसएस फ़ाइल के नीचे अपनी परियोजना के लिए एक अनुभाग जोड़ सकते हैं उदाहरण के लिए मुझे यह पसंद है:

/* Bootstrap overrides */

.some-class-here {
}

जेम्स पोलोज़ का उत्तर देने के बाद मैंने ऐसा किया:

/* Bootstrap overrides */   
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

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

अंत में और भी अधिक अलगाव के लिए मैं अपनी CSS फ़ाइलों को विभाजित करना पसंद करता हूं और उदाहरण के लिए आसान प्रबंधन के लिए अपनी उप-फाइलों को एक मुख्य CSS फ़ाइल में आयात करने के लिए @import घोषणाओं का उपयोग करता हूं:

@import url('css/mysubcssfile.css');

ध्यान दें : यदि आप कई फ़ाइलों में खींच रहे हैं, तो आपको यह सुनिश्चित करने की आवश्यकता है कि वे सही क्रम में लोड होते हैं।

आशा है कि यह किसी की मदद करता है।

Answer 8

मुझे लगता है कि मौजूदा रंग बदले बिना हम इस कम शैलियों को लिख सकते हैं। निम्नलिखित ने मेरे लिए काम किया (बूटस्ट्रैप 3.2.0 में)

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 5px; padding-bottom: 10px; padding-left: 10px; }

अंतिम एक ('नेवबर-ब्रांड') वास्तव में केवल तभी आवश्यक है जब आपके पास अपने 'ब्रांड' नाम के रूप में पाठ हो।

Comments

अच्छा जवाब यह एकमात्र था जिसने बूटस्ट्रैप 3 के नवीनतम संस्करण के साथ मेरे लिए काम किया था (एक नोट: यदि आप अपने पाठ को नीचे धक्का देना चाहते हैं ।navbar- ब्रांड वर्ग के साथ-साथ .navbar-nav> के लिए पेडिंग-टॉप वैल्यू बढ़ाएं। ली> ए क्लासेज।

— ताहिर खालिद

Answer 9

मुझे वही समस्या मिली, बूटस्ट्रैप द्वारा प्रदान की गई मेरे मेनू बार की ऊंचाई बहुत बड़ी थी, वास्तव में मैंने कुछ गलत बूटस्ट्रैप डाउनलोड किए, अंत में इस साइट से orignal बूटस्ट्रैप डाउनलोड करके इसे छुटकारा पाएं .. http://getbootstrap.com/2.3 .2 / yst में बूटस्ट्रैप का उपयोग करना चाहते हैं (netbeans) इस ट्यूटोरियल का पालन करें, https://www.youtube.com/watch?v=XH_qG8gphaw ... आवाज मौजूद नहीं है लेकिन कदम धीमे हैं आप आसानी से समझ सकते हैं और लागू कर सकते हैं उन्हें। धन्यवाद

Comments

वांछित प्रभाव प्राप्त करने के लिए आपने कोड में क्या परिवर्तन किया? यदि आप किसी उत्तर में लिंक की ओर इशारा करते हैं, तो आपको समाधान का सारांश देना चाहिए।

— ब्रायन