2016-02-03 12 views
12

मेरे पास बूटस्ट्रैप सीएसएस के साथ निम्नलिखित HTML है।न्यूनतम चौड़ाई

<div class="row"> 
    <div class="col-sm-4" style="min-width: 66px;">Name</div> 
    <div class="col-sm-1" style="min-width: 120px;">Instance name</div> 
    <div class="col-sm-7" style="min-width: 87px;">Due date</div> 
</div> 

बिना 'न्यूनतम-चौड़ाई' कुछ मामलों में दूसरे स्तंभ की चौड़ाई कम से कम 120px और 'उदाहरण के नाम' है पूरी तरह से दिखाई नहीं है। इसलिए मैंने उन मामलों में 'न्यूनतम-चौड़ाई' पंक्ति की चौड़ाई और 100% से अधिक हो गई है। अंतिम कॉलम नई लाइन में लपेटा गया है।

मैं बूटस्ट्रैप गतिशील कॉलम चौड़ाई रखना चाहता हूं और जब मैं ब्राउज़र विंडो आकार को कम करता हूं तो इंस्टेंस नाम गायब नहीं होता है। मैं इस तरह के व्यवहार कैसे प्राप्त कर सकता हूं?

+0

मेरा उत्तर आपकी समस्या का समाधान हुआ? – Chris

+0

हां। धन्यवाद। मैंने इसे उत्तर के रूप में चिह्नित किया है। –

उत्तर

8

में सुनिश्चित नहीं हैं वहाँ पूरा करने के लिए आप क्या चाहते हैं इस तरह से है।

col-sm-x आपके व्यूपोर्ट के विशिष्ट चौड़ाई प्रतिशत को परिभाषित करता है, और यदि आप कस्टम मान प्रदान करते हैं, तो सभी कॉलम की संचित चौड़ाई या तो 100% से कम या कम होगी, जो वांछित व्यवहार नहीं है।

इसके बजाय, आप एक ही div के लिए कई कक्षाएं प्रदान कर सकते हैं। उदाहरण:

<div class="row"> 
    <div class="col-sm-4 col-xs-1">Name</div> 
    <div class="col-sm-1 col-xs-3">Instance name</div> 
    <div class="col-sm-7 col-xs-2">Due date</div> 
</div> 

इस समाधान के लिए पर्याप्त नहीं है, तो आप सबसे अधिक संभावना ऊपर किसी प्रकार का है कि मैन्युअल रूप से अन्य divs की चौड़ाई सेट की एक जावास्क्रिप्ट समाधान के साथ आ जाएगा।

ऐसा लगता है कि पहले स्टैक ओवरफ्लो पर पोस्ट किया गया एक और सवाल है। here देखें।

Bootstrap Grid on W3C

5

क्या आपने छोटे मानदंडों के लिए अपने मूल्यों को बदलने का प्रयास किया था? उदाहरण के लिए

<div class="col-lg-4 col-sm-4">Name</div> 
    <div class="col-lg-1 col-sm-2">Instance name</div> 
    <div class="col-lg-7 col-sm-6">Due date</div> 

बूटस्ट्रैप अलग स्क्रीन आकार के लिए विकल्प हैं, ताकि आप उन्हें बाहर की जाँच करने के लिए चाहते हो सकता है: http://getbootstrap.com/css/

2

बूटस्ट्रैप कॉलम फ्लेक्स आइटम हैं। आपको एक कॉलम पर निर्णय लेना होगा जो दूसरों को उनकी न्यूनतम चौड़ाई तक पहुंचने पर कम करना चाहिए।

आपके उदाहरण के लिए मैंने अंतिम तिथि चुना, "देय तिथि" जो मानक कॉलम-एसएम -7 होना चाहिए। मैं इसे col-sm-1 में कम करता हूं लेकिन इसे फ्लेक्स-ग्रोथ देता हूं और हमें बूटस्ट्रैप्स अधिकतम-चौड़ाई वाली संपत्ति को ओवरराइट करना होगा।

<div class="row"> 
    <div class="col-sm-4" style="min-width: 66px;">Name</div> 
    <div class="col-sm-1" style="min-width: 120px;">Instance name</div> 
    <div class="col-sm-1" style="min-width: 87px; flex-grow: 1; max-width:100%; ">Due date</div> 
</div> 
यहाँ

है एक बहुत codepen मैंने बनाया: https://codepen.io/timar/pen/VQWmQq/

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