बूटस्ट्रैप 4 कार्ड्स को कार्ड-कॉलम में समान ऊंचाई कैसे बनाएं?

Question

मैं बूटस्ट्रैप 4 अल्फा 2 का उपयोग कर रहा हूं और कार्ड का लाभ उठा रहा हूं। विशेष रूप से, मैं आधिकारिक डॉक्स से लिए गए इस उदाहरण के साथ काम कर रहा हूं । मैं सभी कार्डों को समान ऊंचाई का कैसे बना सकता हूं?

अब मैं सोच सकता हूँ कि निम्नलिखित सीएसएस नियम निर्धारित कर रहा है:

.card {
    min-height: 200px;
}

लेकिन यह सिर्फ एक कठिन कोडित समाधान है जो एक सामान्य मामले में काम नहीं करेगा। मेरे विचार में कोड वही है जो डॉक्स में एक है:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Comments

अब तक कोई प्रयास? साझा करने के लिए कोई कोड?

— baao

वह उदाहरण चिनाई वाले स्तंभों के लिए है। उस शैली की पूरी बात यह है कि कार्ड विभिन्न ऊंचाइयों के हैं। यदि आप समान ऊँचाई चाहते हैं तो एक डेक का उपयोग करें और फ्लेक्सबॉक्स मोड को सक्षम करें।

— क्वेंटिन

डेक केवल एक पंक्ति में कार्ड के लिए काम करता है। मैं जो चाहता हूं, वही प्रभाव है card-columnsलेकिन उसी ऊंचाई को बनाए रखना है।

— ब्लूसर्फर

Answer 1

आप या तो "पंक्ति" या "कॉलम" पर कक्षाएं लगा सकते हैं? यदि आप इसे पंक्ति में उपयोग करते हैं तो कार्ड (सीमा) पर दिखाई नहीं देंगे। https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

यहाँ कुछ अन्य उत्तर 'निराला' लगते हैं। न्यूनतम ऊंचाई या इससे भी अधिक निश्चित ऊंचाई का उपयोग क्यों करेंगे?

मुझे लगा कि यह मुद्दा (समान ऊंचाई) फ्लोटिंग ब्लॉक डिव से दूर प्रगति का कारण था?

Comments

h-100 एक निश्चित ऊँचाई नहीं है, इसकी ऊँचाई 100% है (पंक्ति की)

— konyak

इसका जवाब एसीड होना चाहिए

— 16

यह असली जवाब है

— एंड्रयू बुलॉक

@konyak हाँ, मुझे उस दोस्त का एहसास है। मैं एच -100 (इस पृष्ठ को नीचे स्क्रॉल करने) का उल्लेख नहीं कर रहा हूं।

— केरी7777

Answer 2

मैं बूटस्ट्रैप 4 (बीटा 2) का उपयोग कर रहा हूं। इस बीच स्थितियां बदल गई हैं। मुझे एक ही समस्या थी और एक आसान समाधान मिला। यह मेरा कोड है:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

"Col-sm-12 col-lg-6" के साथ मैंने कार्डों को उत्तरदायी बनाया है। "कार्ड एच -100" के साथ मैंने सभी कार्डों को उनके मूल कॉलम की ऊंचाई पर सेट किया है। मेरे सिस्टम पर यह काम करता है, लेकिन मैं समर्थक नहीं हूं। इसलिए, उम्मीद है कि मैंने किसी की मदद की।

Comments

इतना सरल एच -100

— पीएनसी

— .एच

जब d-flexIE (जो मुझे समर्थन करना है) के साथ मुद्दों के कारण मेरे लिए यह चाल चली। मैंने सिर्फ mb-4कार्ड को थोड़ा और अलग करने के लिए पैरेंट डिव में जोड़ा ।

— चार्ल्स पास्के

और आप इसे स्क्रॉल करने के लिए .pre-स्क्रॉल करने योग्य का उपयोग कर सकते हैं

— मुहम्मद वकास अज़ीज़

मैं .py के साथ सभी .s-2 वर्ग को पंक्तियों के बीच पैडिंग जोड़ने के लिए।

— कोन्याक

Answer 3

सबसे अच्छा समाधान, बूटस्ट्रैप 4 में आपकी ज़रूरत है: USE THE .d-flexऔर .flex-fillवर्ग। card-decksवे उत्तरदायी नहीं हैं के रूप में उपयोग न करें । मैंने उपयोग किया है col-sm, आप अपनी .colइच्छित कक्षा का उपयोग कर सकते हैं, या col-lg-xx का उपयोग कर सकते हैं चौड़ाई कॉलम की संख्या उदाहरण के लिए 4 या 3 सर्वश्रेष्ठ दृश्य के लिए यदि पोस्ट में कई हैं तो प्रति कॉलम 3 या 4

यहाँ जानवर है, ब्राउज़र विंडो को कम करने के लिए XS को कार्रवाई में देखने का प्रयास करें:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Comments

यह जवाब बहुत अच्छा काम करता है! यदि आप सभी व्यूपोर्ट में वांछित प्रतिक्रियाशील व्यवहार पाने के लिए 'कार्ड-कॉलम' या 'कार्ड-डेक' का उपयोग नहीं कर सकते हैं।

— जीन्स 27'18

इसने मेरे लिए काम किया। मेरे पास एक कॉलम है जिसमें एक बड़ा कार्ड है, और दाईं ओर एक और कॉलम है जिसमें दो पंक्तियाँ हैं। तो, बाएं कार्ड दो आसन्न पंक्तियों की ऊंचाई लेता है, धन्यवाद!

— एरच गार्सिया

यही रास्ता तय करना था। मैंने कोशिश की card-columns लेकिन यह प्रति पंक्ति 3 से अधिक कॉलम नहीं ले सका। इस उत्तर के लिए धन्यवाद

— येकु विलफ्रेड चेत

कार्ड-डेक मेरे मामले में काम नहीं कर रहा था, आपके जवाब ने काम किया!

— टीबीजी

Answer 4

आप वर्ग को लागू कर सकते हैं h-100, जो ऊंचाई 100% तक है।

Answer 5

अद्यतन: में बूटस्ट्रैप 4 , flexbox अब डिफ़ॉल्ट है, और प्रत्येक card-deckपंक्ति 3 कार्ड शामिल होंगे। कार्ड पूरी ऊंचाई तक भरेंगे।

http://www.codeply.com/go/x91w5Cl6ip

बूटस्ट्रैप 4 अल्फा card-columnsसीएसएस 3 कॉलम का उपयोग करता है जो वास्तव में समान ऊंचाइयों का समर्थन नहीं करता है (स्तंभ-भरण को छोड़कर जो केवल फ़ायरफ़ॉक्स में दबा हुआ है)।

यदि आप इसके बजाय बूटस्ट्रैप 4 फ्लेक्सबॉक्स मोड को सक्षम करते हैं, तो आप card-deckऊँचाई को बराबर करने के लिए और हर 3 कॉलम को लपेटने के लिए थोड़ी सीएसएस का उपयोग कर सकते हैं।

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Col में संबंधित
ऊँचाई के बूटस्ट्रैप कार्ड

Comments

मैंने कुछ कोड का परीक्षण करने के लिए आपके कोडर को फोर्क किया है; मुझे शीर्षकों को समान ऊंचाई तक फैलाने की आवश्यकता है, जो यहां नहीं होता है: codeply.com/go/fqnQZ2ZGJy - किसी भी तरह से मुझे पता है कि मैं अपना "छोटा शीर्षक" समान ऊंचाई ले सकता हूं। लंबे समय तक शीर्षक? मैं flexbox और ग्रिड के साथ खेलने की कोशिश की है, लेकिन यह सिर्फ सही पाने के लिए प्रतीत नहीं कर सकते।

— डेववुडहॉल

Answer 6

यहाँ देखें कि मैंने यह कैसे किया:

सीएसएस:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

Answer 7

अंदर कार्ड लपेटो

<div class="card-group"></div>

या

<div class="card-deck"></div>

Answer 8

मैंने कुछ अलग तरीका अपनाया। कार्ड डेक रैपर का उपयोग करना

मैंने एक शैली नियम जोड़ा है जो कार्ड ब्लॉक की ऊंचाई को सीमित करता है:

.card .card-block {max-height:300px;overflow:auto;}

यह निम्न परिणाम देता है:

Answer 9

आप कार्ड-डेक का उपयोग कर सकते हैं, यह सभी कार्डों को संरेखित करेगा ... यह बूटस्ट्रैप 4 आधिकारिक पेज से आता है।

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Answer 10

एक अन्य उपयोगी तरीका कार्ड ग्रिड्स है :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Answer 11

इसे प्राप्त करने का सबसे न्यूनतम तरीका (जो मुझे पता है) :

• .text-monospaceकार्ड में सभी ग्रंथों पर लागू करें ।
• सभी पाठों को कार्ड में समान वर्णों तक सीमित करें।

अपडेट करें

जोड़े .text-truncateकार्ड के शीर्षक और या अन्य ग्रंथों में। यह ग्रंथों को एक पंक्ति में मजबूर करता है। कार्ड बनाने की ऊंचाई समान होती है।

Comments

मुझे लगता है कि आप इस जवाब के साथ हैं। वर्किंग वेब पेज के प्रत्येक कार्ड या सेक्शन में स्पष्ट रूप से अलग-अलग मात्रा में टेक्स्ट (अक्षर) होंगे और फोंट / टाइपफेस का उपयोग करेंगे जो मोनोस्पेस नहीं हैं। आप उस पाठ्य सामग्री को क्यों छांटना चाहेंगे जो आगंतुक पढ़ नहीं सकते हैं?

— केरी7777

@ केरी7777, आप एक लंबे तार को काटकर उसमें "..." जोड़ सकते हैं ताकि उपयोगकर्ताओं को यह पता चल सके कि इसे काट दिया गया है। उनके लिए संपूर्ण स्ट्रिंग को पढ़ने के लिए, उन्हें इसे क्लिक करना होगा या होवर करना होगा। इस तरह, हम प्रदर्शित सामग्री पर निरंतरता बना सकते हैं। क्योंकि सामग्री समान नहीं हैं। कुछ छोटे हैं, कुछ लंबे हैं, और हमारी स्क्रीन स्पेस सीमित है।

— डोनकाडोना

कुछ मामलों में, यह केवल पाठ की लंबाई है जो कार्ड को ऊंचाई में असमान बनाता है। तो यह उत्तर उपयोगी है।

— मोहम्मद शरीफ C

Answer 12

मैं इस पर एक नौसिखिया हूँ तो कृपया क्षमा करें यदि मैं सब कुछ एक साथ याद कर रहा हूँ।

मैंने उपरोक्त कई कोशिश की। यदि आप ऊंचाई निर्धारित करते हैं = 100% कार्ड हमेशा सबसे लंबे कार्ड की सबसे बड़ी लंबाई तक विस्तारित होगा। कंटेनर सभी को समान लंबाई में विवश करेगा।

मैं कंटेनर देखना चाहता था, इसलिए मुझे यह देखने में मदद करने के लिए पृष्ठभूमि रंग का उपयोग किया गया कि क्या चल रहा था।

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

Answer 13

यह मेरे लिए ठीक काम किया:

<div class="card card-body " style="height:80% !important">

बूटस्ट्रैप सामान्य सीएसएस पर हमारे सीएसएस को मजबूर करना।

Answer 14

मुझे इस समस्या का सामना करना पड़ा, ज्यादातर लोग jQuery का उपयोग करते हैं ... यहाँ मेरा समाधान था। "बुरा मत मानना, मैं अभी इसमें एक शुरुआत हूँ ..."

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

यदि किसी भी कार्ड आइटम की ऊंचाई 400px है (यह सामग्री के आधार पर), क्योंकि फ्लेक्स-संरेखित के लिए डिफ़ॉल्ट खिंचाव है, तो .card- आइटम (पंक्ति या कार्ड-संग्रह वर्ग का बच्चा) बढ़ाया जाएगा। कार्ड की ऊँचाई को माता-पिता का 100% होना इस पूरी ऊँचाई पर कब्जा कर लेगा।

मुझे आशा है कि मैं सही था। क्या मैं?

Answer 15

अगर किसी को दिलचस्पी है, तो एक jquery प्लगइन है जिसे jquery.matchHeight.js कहा जाता है

https://github.com/liabru/jquery-match-height

मैचहाइट सभी चयनित तत्वों की ऊंचाई को समान बनाता है। यह कई किनारे मामलों को संभालता है जो समान प्लग को विफल करने का कारण बनते हैं।

कार्ड की एक पंक्ति के लिए, मैं उपयोग करता हूं:

<div class="row match-height">

फिर साइट-वाइड सक्षम करें:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

Answer 16

jsfiddle

सीएसएस के साथ अपनी इच्छित ऊंचाई जोड़ें, उदाहरण:

.card{
    height: 350px;
}

आपको अपना खुद का CSS जोड़ना होगा।

यदि आप दस्तावेज़ीकरण की जाँच करते हैं, तो यह चिनाई शैली के लिए है - इस बिंदु पर वे सभी समान ऊंचाई नहीं हैं।

Comments

ऐसा लगता है कि कार्ड में सामग्री ठीक से संरेखित नहीं है। यह समाधान बहुत मैनुअल है मुझे आश्चर्य है कि अगर कुछ और "स्मार्ट" है

— ब्लूशर्फ

आप गतिशील रूप से ऊंचाई बनाने के लिए, jQuery के साथ कुछ कोशिश कर सकते हैं। निर्भर करता है कि आप उनके साथ क्या करना चाहते हैं।

— प्लेटिनमजाय

बस यह जानने के लिए बहुत उत्सुक हैं कि उत्तर के लिए इतने नीचे वोट क्यों हैं? cuz ऐसा लगता है कि यह काम करता है

— किक बटोस्की

क्या इसका मतलब यह नहीं है कि कार्ड एक निश्चित ऊँचाई पर रहता है, एक उत्तरदायी समान ऊँचाई नहीं?

— रॉबर्ट एंड्रयूज