पेज

के शीर्ष पर रहने के लिए ट्विटर ट्विटर बूटस्ट्रैप फ्रेमवर्क टॉपबार स्थिति, इसलिए, मैं ट्विटर के नए सीएसएस ढांचे, Bootstrap के साथ खेल रहा हूं।पेज

क्या मैं का सामना कर रहा हूँ इस प्रकार है: मैं अपने पृष्ठ पर topbar div जोड़ दिया है:

<div class="topbar"> 
     <div class="fill"> 
     <div class="container"> 
      <h3><a href="#">Project Name</a></h3> 
      <ul> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      </ul> 
      <form action=""> 
      <input type="text" placeholder="Search"> 
      </form> 
      <ul class="nav secondary-nav"> 
      <li class="menu"> 
       <a href="#" class="menu">Dropdown</a> 
       <ul class="menu-dropdown"> 
       <li><a href="#">Secondary link</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Another link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div>

बहरहाल, यह कुछ अन-अपेक्षित व्यवहार है: यह पर पृष्ठ नीचे फ्लोट करने के लिए आगे बढ़ता है शीर्ष - उदाहरण here।

क्या ऐसा होने से रोकने के लिए कोई तरीका है, या मुझे एक अलग ढांचे पर विचार करने की आवश्यकता है?

स्रोत

2011-08-27 jrg

मुझे लगता है कि आप एक समय में twitter.com दौरा नहीं किया है ... – BoltClock

आपका मतलब है कि शीर्ष बार हमेशा शीर्ष पर है? वह इरादा व्यवहार है।

आप topbar के सीएसएस परिभाषा

position: fixed

को हटाने के द्वारा बदल सकते हैं।

स्रोत

2011-08-27 11:55:34

+22

मैं संपादन नहीं ट्विटर स्टाइलशीट, और अपने खुद स्टाइलशीट बनाने चहचहाना शैलियों को ओवरराइड करने की सिफारिश करेंगे। –

यदि आप इससे बच सकते हैं तो इसे संपादित न करें। यदि आप नहीं कर सकते हैं, तो बूटस्ट्रैप-एसएएस कुछ शैलियों को संपादित करने के लिए बहुत अच्छा है जबकि दूसरों को समान रखते हैं। –

-1

<div class="topbar"> 
    <div class="fill"> 
    <div class="container"> 
     <h3><a href="#">Project Name</a></h3> 
     <ul> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
     <form action=""> 
     <input type="text" placeholder="Search"> 
     </form> 
     <ul class="nav secondary-nav"> 
     <li class="menu"> 
      <li class="dropdown" data-dropdown="dropdown" > 
      <a href="#" class="menu">Dropdown</a> 
       <ul class="menu-dropdown"> 
       <li><a href="#">Secondary link</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Another link</a></li> 
       </ul> 
      </li> 
     </li> 
     </ul> 
    </div> 
    </div>

स्रोत

2011-10-30 21:08:24

http://twitter.github.com/bootstrap/components.html#navbar

से नेवबार व्यूपोर्ट के शीर्ष करने के तय करने के लिए, सबसे बाहरी div, .navbar को .navbar-fixed-top जोड़ें। अपने सीएसएस में, आपको अपने <body> पर padding-top: 40px; जोड़कर ओवरलैप के कारण भी खाते की आवश्यकता होगी।

<div class="navbar navbar-fixed-top"> 
    ... 
</div>

स्रोत

2012-02-11 00:41:49

उत्तर

संबंधित मुद्दे