मैं बूटस्ट्रैप द्रव लेआउट में ग्रिड तत्वों को नीचे-संरेखित कैसे करूं

Question

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

यहाँ मेरे पास क्या है:

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

यहाँ मैं क्या चाहता हूँ:

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

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

एक बेड़ा के रूप में यह लेआउट:

http://jsfiddle.net/ryansturmer/A7buv/3/

Comments

क्या आप अपने .rightspan में लगभग 200px का मार्जिन-टॉप नहीं जोड़ सकते हैं?

— रिक्लेविस

CSS का शॉर्टकट केवल इस सवाल का जवाब: stackoverflow.com/a/14223553/259725

— एडम

bootply.com/125740# (क्षमा करें, मैं भूल गया हूं कि कौन सा उत्तर है, जो इस लिंक से प्रश्न है।)

— टूलमेकरविट

Answer 1

कृपया ध्यान दें: बूटस्ट्रैप 4+ उपयोगकर्ताओं के लिए, कृपया क्रिस्टोफ़ के समाधान पर विचार करें (बूटस्ट्रैप 4 ने फ्लेक्सबॉक्स को पेश किया, जो अधिक सुरुचिपूर्ण सीएसएस-केवल समाधान प्रदान करता है)। निम्नलिखित बूटस्ट्रैप के पुराने संस्करणों के लिए काम करेगा ...

---

एक काम के समाधान के लिए http://jsfiddle.net/jhfrench/bAHfj/ देखें ।

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

सकारात्मक स्थिति की ओर:

• बूटस्ट्रैप के मौजूदा सहायक वर्गों की भावना में , मैंने कक्षा का नाम दिया pull-down।
• केवल वह तत्व जो "खींचा जा रहा है" को वर्गीकृत करने की आवश्यकता है, इसलिए ...
• ... यह विभिन्न तत्वों के प्रकार (div, काल, खंड, p, आदि) के लिए पुन: प्रयोज्य है
• यह काफी अच्छी तरह से समर्थित है (सभी प्रमुख ब्राउज़र मार्जिन-टॉप का समर्थन करते हैं)

अब बुरी खबर:

• इसके लिए jQuery की आवश्यकता है
• यह, जैसा कि लिखित, उत्तरदायी (क्षमा नहीं) है

Comments

जवाबदेही के लिए, शायद window.resize हुक? stackoverflow.com/a/2969091/244811

— स्कॉट वीवर

एक सीएसएस समाधान हो सकता है कि कुछ के लिए एक jQuery समाधान का उपयोग न करें। स्टाइल के लिए डोम हेरफेर से बचने के कई कारण हैं।

— आर्कियन

@Aronic: सीएसएस-केवल समाधान क्या है? मैं इसे JS पर निर्भर समाधान भी पसंद करूंगा। बस ओपी के वजीफे को ध्यान में रखें: "एक समाधान जहां मुझे अपनी दिव्यांगों की पूर्ण ऊंचाई को निर्दिष्ट करने की आवश्यकता नहीं थी"

— जेरोमी फ्रेंच

@ cfx ने एफडी के साथ एक सीएसएस केवल एक समाधान पोस्ट किया जिसमें पूर्ण ऊंचाइयों की आवश्यकता नहीं है।

— तीरंदाजी

दूसरी ओर, मेरा समाधान उपयोगकर्ता को भाई-बहनों को प्रभावित किए बिना व्यक्तिगत तत्वों (बूटस्ट्रैप के समान व्यवहार देने ) .pull-leftऔर नीचे-संरेखित करने की अनुमति देता है .pull-right। क्या यह CSS-only समाधान के साथ किया जा सकता है?

— जेरोमे फ्रेंच

Answer 2

यह बूटस्ट्रैप 3 के लिए एक अद्यतन समाधान है (हालांकि पुराने संस्करणों के लिए काम करना चाहिए) जो केवल CSS / LESS का उपयोग करता है:

http://jsfiddle.net/silb3r/0srp42pb/11/

आप पंक्ति पर फ़ॉन्ट-आकार को 0 पर सेट करते हैं (अन्यथा आप स्तंभों के बीच pesky स्थान के साथ समाप्त हो जाएंगे), फिर स्तंभ फ़्लोट्स निकालें, प्रदर्शन को सेट करें inline-block, उनके फ़ॉन्ट-आकार को फिर से सेट करें, और फिर vertical-alignइसे सेट किया जा सकता है आपको जिसकी भी ज़रूरत हो।

कोई jQuery की आवश्यकता है।

Comments

मैं इसे बीच में रखना चाहता हूं। हालाँकि आपके jsfiddle में जब मैंने "वर्टिकल-अलाइन: मिडल" की कोशिश की, तब यह काम नहीं किया। कोई विचार?

— आनंद

दोनों divको सेट करने का प्रयास करें vertical-align: middle;।

— cfx

यह एकमात्र स्वीकार्य उत्तर है! @ लुकास उन स्तंभों की चौड़ाई की अनदेखी करेगा जो एक पंक्ति को नहीं भरते हैं। और स्टाइल के लिए डोम हेरफेर ... SMH।

— ३:१५

आपके सीएसएस को पंक्ति से (विशेष रूप से .myrow) बंद किया गया है ... इसका मतलब यह नहीं है कि आपके पास एक स्तंभ शीर्ष-संरेखित, एक स्तंभ नीचे-संरेखित और एक तीसरा स्तंभ शीर्ष-संरेखित नहीं हो सकता है?

— जेरोमे फ्रेंच

धन्यवाद ! बूटस्ट्रैप 4 के साथ ठीक काम करता है

— एली टेसटेडो

Answer 3

आप फ्लेक्स का उपयोग कर सकते हैं:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}

Comments

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

— एलेसेंड्रो डेंटेला

फ्लेक्स का उपयोग करने के लिए उत्कृष्ट सुझाव। बूटस्ट्रैप समस्या को हल करने के लिए सरल, स्ट्रेट-फॉरवर्ड, और बूटस्ट्रैप का उपयोग करता है।

— चेडरमोनी

शानदार उत्तर और पूरी तरह से बूटस्ट्रैप के साथ काम करता है जिसमें कोई जावास्क्रिप्ट / jquery की आवश्यकता नहीं होती है।

— फाइल

हाँ, इसे एक नियमित बूटस्ट्रैप पंक्ति और bam में जोड़ें, यह काम करता है। सुंदर। कैसे एक गैर-उत्तरदायी, jquery समाधान शीर्ष उत्तर बन गया? हम कभी नहीं जान पाएंगे।

— लेवी फुलर

@LeviFuller मेरा अनुमान है क्योंकि यह समाधान केवल एक ब्रेकप्वाइंट का समर्थन करता है

— क्लैमचोडा

Answer 4

आपको इसके लिए कुछ शैली जोड़ने की आवश्यकता है span6, जैसे:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

और यह आपकी पहेली है: http://jsfiddle.net/sgB3T/

Comments

मैं इसे स्पैन 6 में सेट करने के बजाय एक विशिष्ट सीएसएस क्लास बनाऊंगा, लेकिन टेबल-सेल रणनीति अच्छी तरह से काम करती है! मुझे सही चौड़ाई रखने के लिए युक्त डिव में "डिस्प्ले: टेबल-रो" सेट करना था।

— मेटा-नाइट

बूटस्ट्रैप 3 के लिए मैंने यह नियम जोड़ा है: .row.align-bottom> [class ^ = col] {डिस्प्ले: टेबल-सेल; ऊर्ध्वाधर-संरेखित करें: नीचे; फ्लोट: कोई नहीं; } पंक्ति & lt; div वर्ग = "पंक्ति संरेखित-तल" & gt;

— मार्टिन

@Martin, जब आप सेट करते हैं तो आपका नियम ठीक काम करता है। .ign-bottom {display: table-row;}, हालांकि, पंक्ति संरेखण बंद है क्योंकि तालिका पंक्तियाँ बूटस्ट्रैप मार्जिन-लेफ्ट और मार्जिन-राइट का सम्मान नहीं करती हैं: -15px ...... विचार?

— एलेक्स व्हाइट

@AlexWhite - उस पंक्ति में सभी कॉल पर padding-left: 0और रखो padding-right: 0।

— एनालॉग वेपन

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

— आर्कियोनिक

Answer 5

इस कार्यक्षमता को लागू करने के लिए एक कोणीय निर्देश भी दिया गया है

    pullDown: function() {
      return {
        restrict: 'A',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();

          iElement.css('margin-top', $parentHeight - height);
        }
      };
    }

Answer 6

बस माता-पिता को display:flex;और बच्चे को सेट करें margin-top:auto। यह बच्चे की सामग्री को मूल तत्व के तल पर रखेगा, यह मानते हुए कि मूल तत्व की ऊंचाई बाल तत्व से अधिक है।

margin-topजब आपको अपने मूल तत्व पर ऊँचाई या आपके मूल तत्व के भीतर आपकी रुचि के बाल तत्व से अधिक कोई अन्य तत्व हो, तो उसके लिए मान की गणना करने की आवश्यकता नहीं है ।

Comments

यह स्वीकृत उत्तर होना चाहिए: यह किसी भी ब्राउज़र में छोटा, सरल और काम करता है जो फ्लेक्स का समर्थन करता है। एकमात्र दोष यह है कि यह जवाबदेही को तोड़ता है।

— tbm

Answer 7

अन्य उत्तरों के आधार पर यहां और भी अधिक उत्तरदायी संस्करण है। मैंने व्यूपोर्ट का समर्थन करने के लिए इवान के संस्करण से बदलाव किए <768px चौड़े और बेहतर समर्थन के लिए धीमी खिड़की का आकार बदलता है।

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        function fixHeader() {
            //for each element that is classed as 'pull-down'
            //reset margin-top for all pull down items
            $('.pull-down').each(function () {
                $(this).css('margin-top', 0);
            });

            //set its margin-top to the difference between its own height and the height of its parent
            $('.pull-down').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css('margin-top', $(this).parent().height() - $(this).height());
                }
            });
        }

        $(window).resize(function () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);

Comments

इस शोधन के लिए धन्यवाद, मैंने इसे एक वर्तमान परियोजना के लिए लिया है और यह अच्छी तरह से काम कर रहा है।

— 17

क्यों margin-top0 पर सेट करें, फिर इसे नए मान पर सेट करें? इसके अलावा, ये चीजें दो each()"छोरों" में क्यों हैं ?

— जेरॉमी फ्रेंच

Answer 8

यह cfx के समाधान पर आधारित है, लेकिन प्रदर्शन के कारण जोड़े गए इंटर-कॉलम रिक्त स्थान को हटाने के लिए पैरेंट कंटेनर में फ़ॉन्ट आकार को शून्य करने के बजाय: इनलाइन-ब्लॉक और उन्हें रीसेट करने के लिए, मैंने बस जोड़ा

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

क्षतिपूर्ति करने के लिए कॉलम divs पर।

Answer 9

खैर, मुझे उन उत्तरों में से कोई भी पसंद नहीं आया, उसी समस्या का मेरा समाधान यह जोड़ना था <div>&nbsp;</div>:। तो आपकी योजना में यह इस तरह दिखाई देगा (कम या ज्यादा), मेरे मामले में कोई शैली परिवर्तन आवश्यक नहीं थे:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------

Comments

 यदि आप बाएं सेल की लंबाई अज्ञात है, तो आपको जोड़ने की संख्या कैसे पता चलेगी?

— गकबनबीग

Answer 10

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

Comments

आपको अपने उत्तर में कुछ जानकारी जोड़ने की कोशिश करनी चाहिए, जिसमें यह बताया गया है कि यह ओपी प्रश्न का उत्तर क्यों देता है

— MLavoie