बूटस्ट्रैप - कार्ड के नीचे बटन को संरेखित करें

Question

मैं बूटस्ट्रैप के उन उदाहरणों में से एक पर झाँक रहा था जो card-deckऔर cardवर्ग ( मूल्य निर्धारण उदाहरण ) का उपयोग करते हैं । मुझे आश्चर्य हुआ कि यदि सूची में से एक में दूसरों की तुलना में कम आइटम हैं तो बटन संरेखण को कैसे ठीक कर सकता है।

मैं चाहूंगा कि सभी बटन लंबवत रूप से संरेखित हों (प्रत्येक कार्ड के नीचे) लेकिन मैं ऐसा करने का एक तरीका नहीं खोज सका। मैंने .align-bottomबटन सेट करने के साथ ही कक्षा को सेट करने की कोशिश की <div class="align-text-bottom">। मैंने अंतरिक्ष को जोड़ने के बारे में इस सवाल से कई सुझावों की भी कोशिश की, लेकिन अभी भी कोई सफलता नहीं है (रिक्ति को भी परिवर्तनशील होना चाहिए कि यह सूची से शेष स्थान को भरता है)।

रैपिंग में <div class="card-footer bg-white">वांछित परिणाम नहीं मिला क्योंकि या तो यह कार्ड के निचले हिस्से में बटन को संरेखित नहीं करता है और यह चारों ओर किसी प्रकार की सीमा बनाता है।

क्या किसी को कुछ पता है?

संपादित करें: यहाँ एक jsfiddle है जो समस्या जैसा दिखता है।

Comments

आप हमेशा इसे absolute, bottom:0, margin:0 autoअपने माता-पिता के साथ सेट कर सकते हैं , जैसे किposition: relative

— फेरन बायरू

@Paulie_D मैंने सेटिंग की कोशिश की, style="margin-top: auto;"लेकिन स्थिति में बदलाव नहीं आया। बटन ठीक उसी जगह बैठता है, जहां वह पहले था। देखिए यह फील ।

— a_guest

Answer 1

आप निम्न बूटस्ट्रैप 4 संशोधक वर्गों का उपयोग कर सकते हैं:

1. जोड़े d-flexको.card-body
2. जोड़े flex-columnको.card-body
3. में निहित mt-autoकरने के लिए जोड़ें.btn.card-body

बेला

बूटस्ट्रैप 4 के लिए फ्लेक्सबॉक्स संशोधित कक्षाओं की पूरी सूची के लिए इस पृष्ठ का संदर्भ लें ।

Comments

मुझे काम करने के लिए 100% ऊंचाई पर "एच -100" सेट करना पड़ा। काम करने के लिए बॉडी, लेकिन शायद मेरी गलती है? अच्छे उत्तर के लिए धन्यवाद!

— रस्टजिम

Answer 2

इसी तरह के सवाल का जवाब यहां दिया गया है ।

align-self-endतल पर संरेखित करने के लिए बस वर्ग को आइटम में जोड़ें ।

https://www.codeply.com/go/Fiorqv1Iz6

     <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>20 users included</li>
              <li>10 GB of storage</li>
            </ul>
            <button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
     </div>

डिफ़ॉल्ट रूप से, cardडिस्प्ले है: फ्लेक्स, लेकिन card-bodyयह नहीं है। इस वजह से आपको इसमें जोड़ना d-flex flex-columnहोगा card-body। यह फ्लेक्सबॉक्स संरेखण कक्षाओं को काम करेगा।

एक अन्य विकल्प mt-autoबटन पर (ऑटो टॉप मार्जिन) का उपयोग करना है जो इसे कार्ड के निचले हिस्से में धकेल देगा।

Comments

यह 4.4.1 में लगता है कि कार्ड फ्लेक्स नहीं है, मुझे इसे काम करने के लिए .d- फ्लेक्स को जोड़ने की जरूरत है

— पाब्लो

Answer 3

सेट .card-bodyकरने के लिए div display:flexऔर flex-direction:column।

फिर बटन दें margin-top:auto।

मुझे लगता है कि इसके लिए बूटस्ट्रैप सहायता कक्षाएं हैं।

.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>

    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

Answer 4

आपको जोड़ना होगा:

<div class="card-footer">
<button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>

Answer 5

फुटर का उपयोग करें, इसमें पहले से ही आपके लिए सब कुछ है।

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Title goes here</h4>
      <p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
   </div>
   <div class="card-footer text-muted mx-auto">
      <button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
   </div>
</div>

तब आप वैकल्पिक रूप से कार्ड-पाद तत्व को स्टाइल कर सकते हैं।

.card-footer {
  background: transparent;
  border-top: 0px;
}

डेमो: https://jsfiddle.net/rustynox/203zwyq6/

Answer 6

फ्लेक्स आपका दोस्त है

कुछ इस तरह से चलेगा जादू:

.flex-wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #eee;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}


.flex-item {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}


.fill{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.btn{
  background:#069;
  padding:10px;
  color:#fff;
}

<div class="flex-wrap">

  <div class="flex-container">
    <div class="flex-item">FREE</div>
    <div class="flex-item fill">
      <h2>$0</h2>
      <p>Some text ... ashd iaush diuhasd uhasd aiusdh iaush d haisduhaiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">SIGN UP</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">PRO</div>
    <div class="flex-item fill">
      <h2>$10</h2>
      <p>Some text ... ashd iaush uhasd aiusdh iaush d haisduhdiuhasd aiusdh iuhasd aiusdh iaush d haisduhaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">GET STARTED</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">ENTERPRISE</div>
    <div class="flex-item fill">
      <h2>$20</h2>
      <p>Some text ... ashd iaush diuhasd aiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">CONTACT</a>
    </div>
  </div>
  
</div>