बूटस्ट्रैप

Question

में एक कंटेनर-तरल पदार्थ के साथ निश्चित चौड़ाई कॉलम मैं निश्चित चौड़ाई के साथ बाईं ओर एक साइड कॉलम रखने के लिए एक समाधान खोजने की कोशिश कर रहा हूं, और उसके बाद, एक सामान्य बूटस्ट्रैप कंटेनर-तरल पदार्थ के दाईं ओर।

भले ही साइडबार बूटस्ट्रैप संरचना के अंदर न हो, यह ठीक है। मेरा मतलब है कि यह कोएल-एक्सएक्स-एक्सएक्स वर्ग के साथ नहीं होना चाहिए।

जो भी मैं मुख्य समस्या करता हूं वह यह है कि मैं तरल पदार्थ कंटेनर साइडबार के बगल में रहता है।

बिंदु यह भी है कि यदि मैं साइडबार को प्रदर्शित नहीं करता हूं, तरल पदार्थ कंटेनर को पृष्ठ की पूरी चौड़ाई का उपयोग करना पड़ता है।

समर्थन के लिए उन्नत में धन्यवाद।

Answer 1

में में (जहां 200px आपकी साइडबार की चौड़ाई है) के साथ अपने container-fluid को शामिल करने का प्रयास करें।

तो उदाहरण

Answer 2

एक निश्चित द्रव लेआउट possible in Bootstrap 3 है के लिए position: absolute साथ अपने साइडबार की स्थिति है, लेकिन अब बूटस्ट्रैप 4 flexbox यह बहुत आसान है है। तुम बस तो flex: 1; आपका मुख्य स्तंभ पर शेष चौड़ाई को भरने के लिए अपने नियत साइड कॉलम flex: 0 0 300px; की चौड़ाई सेट करने के लिए flexbox सक्षम करने के लिए, और बनाने के लिए कुछ सरल समायोजन की जरूरत है, और ...

बूटस्ट्रैप 4 अल्फा 2 http://codeply.com/go/eAYKvDkiGw

बूटस्ट्रैप 4 अल्फा 6 या बीटा http://codeply.com/go/V9UQrvLWwz

:

यहाँ नवीनतम बूटस्ट्रैप 4 के लिए एक सरल अद्यतन जो डिफ़ॉल्ट रूप से flexbox है

@media (min-width: 576px) { 
    .sidebar { 
      max-width: 280px; 
    } 
} 

<div class="container-fluid"> 
    <div class="row flex-nowrap"> 
     <div class="col-md-4 col-12 sidebar"> 

     </div> 
     <div class="col-md col-12 main"> 
      <h2>Main (fluid width...)</h2> 
     </div> 
    </div> 
</div> 

यह भी देखें: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

अद्यतन 2018 Bootstrap 4.0.0 example