एक केंद्रित बूटस्ट्रैप 3 ग्रिड

Question

के साथ एक निश्चित साइडबार बनाना, मैं एक निश्चित साइडबार बनाना चाहता हूं जो मेरे केंद्रित बूटस्ट्रैप ग्रिड के बाहर मौजूद है। ऐसा करने का प्रयास करते समय मुझे चुनौती का सामना करना पड़ रहा है यह निर्धारित करना है कि मेरे .container पर अतिरिक्त शैलियों को लागू/ओवरराइट करना है ताकि स्क्रीन का आकार बदलने पर यह मेरी साइडबार को ओवरलैप न करे।

शुरुआत तो .container, .row और .col-md-12 मैं केवल सीएसएस ढांचे के ग्रिड भाग का उपयोग कर रहा के लिए कोड bootstrap.css फ़ाइल से ही खींच लिया है और कस्टम नहीं है। यह भी ध्यान रखें कि मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं, इसलिए कृपया बूटस्ट्रैप 2 के लिए द्रव ग्रिड समाधान के लिए कोई सुझाव नहीं है जिसे अक्सर पिछले धागे में पूछा जाता है।

एचटीएमएल

<div id="left-nav"></div> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <p>Lorem ipsum dolor sit amet, nunc dictum at.</p> 
     </div> 
    </div> 
</div> 

सीएसएस

html, body { 
    height: 100%; 
    width: 100%; 
} 
#left-nav { 
    background: #2b2b2b; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 250px; 
} 

Answer 1

As drew_w said, आप एक good example here पा सकते हैं। http://startbootstrap.com/templa:

एचटीएमएल

<div id="wrapper"> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"><a href="#">Home</a></li> 
      <li><a href="#">Another link</a></li> 
      <li><a href="#">Next link</a></li> 
      <li><a href="#">Last link</a></li> 
     </ul> 
    </div> 
    <div id="page-content-wrapper"> 
     <div class="page-content"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <!-- content of page --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

सीएसएस

#wrapper { 
    padding-left: 250px; 
    transition: all 0.4s ease 0s; 
} 

#sidebar-wrapper { 
    margin-left: -250px; 
    left: 250px; 
    width: 250px; 
    background: #CCC; 
    position: fixed; 
    height: 100%; 
    overflow-y: auto; 
    z-index: 1000; 
    transition: all 0.4s ease 0s; 
} 

#page-content-wrapper { 
    width: 100%; 
} 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

@media (max-width:767px) { 

    #wrapper { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     left: 0; 
    } 

    #wrapper.active { 
     position: relative; 
     left: 250px; 
    } 

    #wrapper.active #sidebar-wrapper { 
     left: 250px; 
     width: 250px; 
     transition: all 0.4s ease 0s; 
    } 

} 

JSFIDDLE