ट्विटर बूटस्ट्रैप - पूरी चौड़ाई नेवबार

Question

टीबी के उदाहरण के बाद, मैं एक नेविगेशन बार है कि के रूप में चिह्नित किया गया है इस प्रकार है:

<div class="container"> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
        <!-- nav bar items here --> 
     </div> 
    </div> 
</div> 

मैं इस चाहते हैं स्क्रीन की पूरी चौड़ाई को पार करने वाली है और किसी भी जरूरत नहीं गोलाकार कोनों - navbar के स्थिर शीर्ष स्टाइल के समान।

मुझे यह नहीं लगता कि टीबी में ऐसा कैसे किया जाए। यदि कोई रास्ता नहीं है, तो मुझे टीबी को ओवरराइड करने और प्रतिक्रिया को तोड़ने के लिए किस सीएसएस की आवश्यकता होगी?

Answer 1

अपने कंटेनर के बाहर नेवबार रखो:

<div class="navbar"> 
    <div class="navbar-inner"> 
       <!-- nav bar items here --> 
    </div> 
</div> 
<div class="container"> 

</div> 

संपादित करें:

यहाँ एक है कि मैं उत्तरदायी नेवबार के साथ किया था है। कोड दस्तावेज़ निकाय फिट बैठता है:

<div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 

      <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 

      <!-- Be sure to leave the brand out there if you want it shown --> 
      <a class="brand" href="#">Project name</a> 


      <!-- Everything you want hidden at 940px or less, place within here --> 
      <div class="nav-collapse"> 
      <!-- .nav, .navbar-search, .navbar-form, etc --> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Link</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Link</a></li> 
      </ul> 
      <ul class="nav pull-right"> 
      <li><a href="#">Log out</a></li> 
      </ul> 
      </div> 

      </div> 
     </div> 

    </div> 
    <div class="container"> 
    <div class="row"> 
     <div class="span12"> 

     </div> 
    </div> 


    </div> <!-- end container --> 
    <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script> 

Answer 2

आपको कंटेनर को नेविबार के नीचे धक्का देना होगा।

सिर्फ मामले में आप अपने कस्टम सीएसएस के बाद bootstrap.css लिंक आप कुछ सीएसएस

body { 
    padding-left: 0px !important; 
    padding-right: 0px !important; 
} 

.navbar-inner { 
    border-radius: 0px !important; 
} 

!important की जरूरत है ओवरराइड कर सकते हैं मेरे कार्य बेला यहाँ http://jsfiddle.net/meetravi/aXCMW/1/

<header> 

    <h2 class="title">Test</h2> 
</header> 
<div class="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Test1</a></li> 
      <li><a href="#">Test2</a></li> 
      <li><a href="#">Test3</a></li> 
      <li><a href="#">Test4</a></li> 
      <li><a href="#">Test5</a></li> 

     </ul> 
    </div> 
</div> 
<div class="container"> 

</div> 

Answer 3

प्राप्त करें।

और एक .container

Answer 4

से बाहर अपने एनएवी एचटीएमएल जोड़ने बॉर्डर-त्रिज्या को निकालने के लिए पर कोनों

.navbar-inner{ 
     -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; 
    } 

Answer 5

सुनिश्चित नहीं हैं कि अपने custom.css फ़ाइल को यह शैली को जोड़ने अगर navbar-static-top वर्ग उपलब्ध था संस्करण 2.2.2 करने से पहले, लेकिन मुझे लगता है कि आप निम्नलिखित के साथ अपने लक्ष्य को पूरा कर सकते हैं:

<div class="navbar navbar-static-top"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Test1</a></li> 
      <li><a href="#">Test2</a></li> 
      <li><a href="#">Test3</a></li> 
      <li><a href="#">Test4</a></li> 
      <li><a href="#">Test5</a></li> 
     </ul> 
    </div> 
</div> 
<div class="container"> 
    ... 
</div> 

मैं एक साथ एकडाल 210।

Answer 6

मुझे पता है कि मैं पार्टी के लिए थोड़ा देर हो चुकी हूं, लेकिन मुझे सीएसएस को चौड़ाई अवधि 100% करने के लिए, और एल/आर मार्जिन को 0px पर सेट करके इस मुद्दे के आसपास मिल गया;

#div_id 
{ 
    margin-left: 0px; 
    margin-right: 0px; 
    width: 100%; 
} 

Answer 7

मैं पार्टी के लिए बहुत देर हो चुकी हूं लेकिन यह उत्तर Google खोज परिणामों में शीर्ष पर खींचता है।

बूटस्ट्रैप 3 का निर्माण इस के लिए एक जवाब है, अपने कंटेनर div को अपने navbar में container-fluid पर सेट करें और यह स्क्रीन चौड़ाई में गिर जाएगी।

तो जैसा:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="/">More Stuff</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 8

बस इस तरह कंटेनर-पूर्ण-चौड़ाई के वर्ग कंटेनर बदलने के लिए:

<div class="container-fullwidth"> 

Answer 9

आप अपने भीतर-नेवबार को कॉल-MD-12 को जोड़ने के लिए है। एमडी डेस्कटॉप के लिए है। आप बूटस्ट्रैप की विकल्पों की सूची से अन्य विकल्प चुन सकते हैं।कॉल-एमडी -12 में 12 पूर्ण चौड़ाई के लिए है। यदि आप आधा चौड़ाई चाहते हैं तो आप 12 के बजाय 6 का उपयोग कर सकते हैं। उदाहरण के लिए कॉल-MD-6।

यहाँ अपने प्रश्न

<div class="container"> 
     <div class="navbar"> 
      <div class="navbar-inner col-md-12"> 
       <!-- nav bar items here --> 
      </div> 
     </div> 
    </div> 

Answer 10

का हल सिर्फ <div class="container-fluid"> है, जो दोनों पक्षों पर कोई मार्जिन के साथ कंटेनर है साथ <div class="container"> की जगह है।

मुझे लगता है कि यह सबसे अच्छा समाधान है क्योंकि यह कुछ बेकार ओवरराइडिंग से बचाता है और अंतर्निर्मित कक्षाओं का उपयोग करता है, यह साफ है।