बूटस्ट्रैप

Question

निम्नलिखित में केवल एक स्तंभ तरल पदार्थ बनाने के लिए बूटस्ट्रैप 3.2 में मेरी लेआउट की संरचना है स्क्रीन आकार के अनुसार।

क्या यह बूटस्ट्रैप के container-fluid फैशन में संभव है? या मुझे अन्य तरीकों से गुजरना चाहिए?

Answer 1

कॉलम को निश्चित चौड़ाई रखने के लिए कोई "बूटस्ट्रैप तरीका" नहीं है। Demo - तो, ​​हम कुछ तरीके

1. उपयोग flexbox (सबसे अच्छा तरीका है) में आप क्या चाहते करने के लिए सीएसएस का उपयोग कर सकते हैं।

.row { 
    display: flex; 
} 
.fixed-side-column { 
    width: 250px; 
} 
.fluid-middle-column { 
    flex-grow: 1; 
} 

1. उपयोग calc() (या जावास्क्रिप्ट समकक्ष) मन browser support में रखते हुए - Demo

.row > div { 
    float:left; /* Could also use display: inline-block. */ 
} 
.fixed-side-column { 
    width:250px; 
} 
.fluid-middle-column { 
    width:calc(100% - 500px); 
} 

1. उपयोग पूर्ण स्थिति और मध्य तत्व पर गद्दी किसी भी गणना की आवश्यकता को दूर करने के लिए - Demo

आपको मार्क-अप कुछ

<div class="container-fluid"> 
<div class="row"> 
    <div class="fluid-middle-column"> 
     <!-- I want only this column to be fluid. --> 
    </div> 
    <div class="fixed-side-column"> 
     <!-- I want this column to be fixed. --> 
    </div>  
    <div class="fixed-side-column right"> 
     <!-- I want this column to be fixed. --> 
    </div> 
    </div> 
</div> 

/* CSS */ 
.fixed-side-column { 
    width:250px; 
    float:left; 
} 
.right { 
    float:right; 
} 
.fluid-middle-column { 
    position:absolute; 
    z-index:-1; 
    top:0; 
    left:0; 
    width:100%; 
    padding: 0 250px 0 250px; 
} 

बदलने के लिए होगा

स्क्रीन को छोटा होने पर क्या होता है, इसे संभालने के लिए आपको कस्टम मीडिया प्रश्न जोड़ने की आवश्यकता होगी।