बूटस्ट्रैप 3.0 - द्रव ग्रिड जिसमें निश्चित कॉलम आकार शामिल हैं

Question

मैं बूटस्ट्रैप का उपयोग करना सीख रहा हूं। वर्तमान में, मैं लेआउट के माध्यम से अपना रास्ता बना रहा हूं। जबकि बूटस्ट्रैप बहुत अच्छा है, मुझे लगता है कि सब कुछ दिनांकित लगता है। मेरे जीवन के लिए, मुझे लगता है कि मुझे लगता है कि एक बुनियादी लेआउट है जिसे मैं समझ नहीं सकता। मेरा लेआउट निम्नलिखित की तरह दिखता है:

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

इस ग्रिड को खिड़की की पूरी ऊंचाई लेने की जरूरत है। मेरी समझ से, मुझे निश्चित और द्रव की चौड़ाई को मिलाना होगा। हालाँकि, बूटस्ट्रैप 3.0 में अब द्रव वर्ग नहीं है। यहां तक ​​कि अगर यह किया, मैं यह पता लगाने के लिए कैसे तरल और निश्चित स्तंभ आकार मिश्रण नहीं कर सकते। क्या कोई बूटस्ट्रैप 3.0 में ऐसा करना जानता है?

Comments

पंक्तियों और स्तंभों के साथ तालिकाओं का उपयोग करते हुए देखें।

— कुल्लू

यहाँ बूटस्ट्रैप 3 के लिए एक निश्चित द्रव का उदाहरण दिया गया है: codeply.com/go/GN4QinVrjI

— Zim

Answer 1

बूटस्ट्रैप 3 के साथ तरल पदार्थ और निश्चित चौड़ाई को मिलाने का वास्तव में कोई आसान तरीका नहीं है। इसका मतलब इस तरह से होना है, क्योंकि ग्रिड सिस्टम को एक तरल पदार्थ, उत्तरदायी चीज़ के रूप में डिज़ाइन किया गया है। आप कुछ हैक करने की कोशिश कर सकते हैं, लेकिन यह रिस्पॉन्सिव ग्रिड सिस्टम क्या करने की कोशिश कर रहा है, इसके खिलाफ जाना होगा, जिसका इरादा उस लेआउट को विभिन्न डिवाइस प्रकारों में बनाना है।

यदि आपको इस लेआउट से चिपके रहने की आवश्यकता है, तो मैं आपके पृष्ठ को कस्टम CSS के साथ रखना और ग्रिड का उपयोग नहीं करने पर विचार करूंगा।

Comments

मुझे लगता है कि इस तरह की बात को फ्लेक्सबॉक्स के लिए पूर्ण समर्थन की प्रतीक्षा करनी होगी, लेकिन यह अभी भी वास्तव में लंगड़ा है। स्तंभों की संख्या स्थिर होने पर बूटस्ट्रैप का मॉडल बहुत अच्छा है, लेकिन, उदाहरण के लिए, यदि आप गतिशील रूप से स्तंभों को छिपा सकते हैं और दिखा सकते हैं, तो कम से कम एक स्तंभ के तरल होने का समर्थन करने से बहुत अधिक समझ में आता है।

— नैट बंडी

कृपया, समाधान के साथ इस लिंक का संदर्भ शामिल करने के लिए अपने उत्तर को संपादित करें। सादर: stackoverflow.com/questions/8740779/…

— मृत्यु

Answer 2

संपादित करें: जैसा कि बहुत से लोग ऐसा करना चाहते हैं, मैंने एक सामान्य गाइड केस के साथ एक छोटी गाइड लिखी है, https://www.atlascode.com/bootstrap-fixed-width-sidebars/ । आशा करता हूँ की ये काम करेगा।

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

आपको रूट पंक्ति पर एक पेडिंग-लेफ्ट में डालने की आवश्यकता है, फिर एक चाइल्ड रो है जिसमें आपके सामान्य ग्रिड लेआउट तत्व शामिल हैं।

यहां बताया गया है कि मैं आमतौर पर यह कैसे करता हूं http://jsfiddle.net/u9gjjebj/

एचटीएमएल

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

सीएसएस

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

Comments

यह एक अच्छा है, लेकिन यदि आप निश्चित कॉलम के अंदर रखते हैं, तो यह <p> <a class="btn btn-default" href="#" role="button"> विवरण देखें & raquo; </a> </ p> या बूटस्ट्रैप ड्रॉपडाउन तब ये निश्चित कॉलम में काम नहीं कर रहे हैं। क्या इस के लिए कोई हल है?

— वेलेव एलियास

@VaclavElias स्थिति के साथ एक पूर्ण आकार में डालने का प्रयास करें: रिश्तेदार और फिर ड्रॉपडाउन? यदि आप समस्या को दिखाने के लिए jsfiddle बनाते हैं तो यह मदद करता है

— w00t

मैं अभी तक यह देखना चाहता हूं कि यह सभी ब्राउज़रों में कैसे काम करता है, लेकिन अन्यथा, अच्छा काम, अच्छी तरह से किया जाता है।

— फिल कूपर

क्या दाहिने हाथ की तरफ निश्चित कॉलम के साथ ऐसा करने का कोई तरीका है?

— सीन

position: fixedइसका मतलब यह है कि जब उस कॉलम की सामग्री को स्क्रॉल करना बाकी पेज के ऊपर तैरता है। मेरे मामले में मैंने इसका उपयोग करके तय किया position: absolute।

— laurent

Answer 3

या तालिका-सेल के साथ प्रदर्शन संपत्ति का उपयोग करें;

सीएसएस

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

एचटीएमएल

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

Comments

समस्या है जब आप पूर्व का उपयोग कर रहे है। `.Visible-xs , becouse प्रदर्शन: टेबल cell` बन display:block...

— दारिउज़ Filipiak

Answer 4

मुझे थोड़ी अलग समस्या थी:

• मुझे एक पूर्ण-खिड़की लेआउट के भाग के बजाय तालिका के भाग के रूप में निश्चित और द्रव स्तंभों को संयोजित करने की आवश्यकता थी
• मुझे बाएं और दाएं दोनों तरफ कॉलम लगाने की जरूरत थी
• मैं कॉलम की पृष्ठभूमि के बारे में चिंतित नहीं था जिसमें युक्त पंक्ति की पूरी ऊंचाई का उपयोग किया गया था

नतीजतन, मैंने floatबाएं और दाएं स्तंभों के लिए सहारा लिया , और फिर बूटस्ट्रैप का उपयोग rowबीच में द्रव स्तंभों को करने के लिए कर सकता था।

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

Comments

@Schemetrical मेरे पास एक सवाल नहीं था। मैंने समझाया कि मुझे थोड़ी अलग समस्या थी, और मैंने उस समाधान को जोड़ा जो मुझे Google से यहां पहुंचने वाले अन्य लोगों की मदद करने के लिए आया था।

— धान मान

आपका उत्तर अमूल्य है। काफी सरल अभी तक मेरी समस्या का समाधान। बहुत बहुत धन्यवाद।

— चार्ल्स

आप पंक्ति को उस मार्जिन को क्यों नहीं दे सकते हैं जिसमें युक्त div आपके उत्तर में है?

— ग्रीनएजजादे

यह उत्तर गंभीरता से वैध है। यदि आपको बूटस्ट्रैप कॉलम का उपयोग करने की आवश्यकता है, लेकिन उन्हें स्क्रीन की कुछ चौड़ाई में ढहने की ज़रूरत नहीं है, तो यह वही है जिसकी आपको आवश्यकता है (उदाहरण के लिए, कॉल-एमडी -3 के बजाय पुल-लेफ्ट / पुल-राइट का उपयोग करें)।

— सैम

यह एक महान जवाब की तरह लगता है। मुझे अपनी marginऔर paddingमेरी पंक्ति के बीच में थोड़ी परेशानी हो रही है लेकिन यह एक समस्या का हल होना चाहिए। इस दृष्टिकोण को लेने के अनपेक्षित परिणाम क्या हैं?

— विशाल

Answer 5

अपडेटेड 2018

IMO, बूटस्ट्रैप 3 में इसे अप्रोच करने का सबसे अच्छा तरीका मीडिया क्वैश्चंस का उपयोग करना होगा जो बूटस्ट्रैप के ब्रेकप्वाइंट के साथ संरेखित करता है ताकि आप केवल निश्चित चौड़ाई के कॉलम का उपयोग करें बड़ी स्क्रीन हो और फिर लेआउट को छोटे स्क्रीन पर जिम्मेदारी से स्टैक करें। इस तरह आप जवाबदेही बनाए रखें ...

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Working Bootstrap Fixed-Fluid Demo

बूटस्ट्रैप 4 में फ्लेक्सबॉक्स होगा, इसलिए इस तरह के लेआउट बहुत आसान होंगे: http://www.codeply.com/go/eAYKvDkiGw

Answer 6

ठीक है, मेरा जवाब सुपर अच्छा है:

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

jsfiddle खेल का मैदान

यदि आप सभी ब्राउज़र के लिए समर्थन चाहते हैं, तो https://github.com/10up/flexibility का उपयोग करें

Answer 7

अद्यतन 2014-11-14: नीचे का समाधान बहुत पुराना है, मैं फ्लेक्स बॉक्स लेआउट विधि का उपयोग करने की सलाह देता हूं। यहाँ एक अवलोकन है: http://learnlayout.com/flexbox.html

---

मेरा समाधान

एचटीएमएल

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

एससीएसएस

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

बिना बूटस्ट्रैप लेआउट कोड को संशोधित किए।

---

अद्यतन (ओपी से नहीं): इस उत्तर को समझने के लिए नीचे कोड स्निपेट जोड़ना। लेकिन यह उम्मीद के मुताबिक काम नहीं कर रहा है।

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}

<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

Comments

-1 इस जवाब से मुझे कोई मतलब नहीं है। कॉलम में 12 तक योग नहीं है। नाम और कीबोर्ड कॉलम ओवरलैप हैं। मुझे समझ नहीं आया कि इसमें +2 वोट कैसे हैं।

— मारियानो देसान्ज़े

Answer 8

क्यों न केवल अपने स्वयं के सीएसएस के साथ बाएं दो स्तंभों को तय किया जाए और फिर बाकी सामग्री के लिए पूरे 12 कॉलम का एक नया ग्रिड लेआउट बनाएं?

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>

Comments

बूटस्ट्रैप में केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं।

— साई डबका