5

मुझे यकीन है कि यह एक आसान हो सकता है लेकिन मुझे अभी तक यह पता नहीं लगा है।केंद्रित सामग्री के साथ बूटस्ट्रैप 3 द्रव कंटेनर

आप एक पूर्ण स्क्रीन तरल पदार्थ कंटेनर कैसे बनाते हैं और नेविगेशन समेत सामग्री को गैर-द्रव कंटेनर में पृष्ठ पर केंद्रित किया जाता है?

मैं सामग्री को एक निश्चित चौड़ाई पर रखते हुए पृष्ठ पर फैलाने के लिए शीर्ष नौसेना/शीर्षलेख पृष्ठभूमि प्राप्त करने का प्रयास कर रहा हूं।

उत्तर

5

आप को अपने नेविगेशन सामग्री के साथ <div> पर ले जा सकते हैं जिस पर आप पृष्ठभूमि स्टाइल जोड़ते हैं। निम्नलिखित उदाहरण देखें:

.background { 
 
    background-color: #f99; 
 
} 
 

 
.content { 
 
    background-color: #9f9; 
 
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="background"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 content">Content</div> 
 
    </div> 
 
    </div> 
 
</div>

+0

आपके उत्तर के लिए धन्यवाद, लेकिन क्या वहाँ एक पृष्ठभूमि छवि है और मैं यह पृष्ठभूमि में जारी रखा जाएगा लेकिन सामग्री के बाकी ही रहते हैं चाहते हैं? –

+0

मुझे डर है कि मैं आपके प्रश्न को पूरी तरह से समझ नहीं पा रहा हूं। उदाहरण के लिए आपकी छवि की तुलना में पृष्ठभूमि छवि लम्बाई है और नीचे का हिस्सा कट ऑफ हो जाता है। या उदाहरण के लिए आप एक पूर्ण ऊंचाई पृष्ठभूमि छवि चाहते हैं? – ckuijjer

1

एक किसी न किसी विधि बूटस्ट्रैप ग्रिड अवधारणा का उपयोग करने के लिए है। बूटस्ट्रैप आपकी पंक्ति को 12 कॉलम में विभाजित करता है। चाल आपके 4-स्पेस ब्लॉक के पहले और एक के बाद 4-ब्लैक-स्पेस ब्लॉक को सम्मिलित करने में शामिल है। उदाहरण:

<div class="container-fluid"> 
 
\t <div class="row"> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
     
 
\t \t <div class="col-sm-4"> 
 
\t \t \t <h2>Title</h2> 
 
\t \t \t <p>Your content here</p> 
 
\t \t </div> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
\t </div> 
 
</div>

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