मैं बूटस्ट्रैप 4.0.0-बीटा.2 का उपयोग कर रहा हूं और मुझे एक सीएसएस समस्या है। मुझे निम्नलिखित लेआउट चाहिएयहां छवि विवरण दर्ज करें यह एचटीएमएल है:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
 <div id="task" class="container">
      <div class="row">
        <div class="col-12">
          <div class="card card-shadow">
            <div class="card-header accent-color">
              FOOOOOOOO
            </div>
            <div class="card-body">
              <h4 class="card-title">BAAAR</h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
              <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card card-shadow" id="paint">
            <div class="card-header accent-color">
              paint
            </div>
            <div class="card-body">
              <app-paint></app-paint>
            </div>
          </div>
        </div>
      </div>
    </div>

और जो मैं बनाने की कोशिश कर रहा हूं वह कार्ड का एक लेआउट है। मैं चाहता हूं कि पहला कार्ड कॉलम-12 की चौड़ाई के भीतर रहे और सामग्री के बाद ऊंचाई को अनुकूलित करे। और फिर मैं चाहता हूं कि दूसरा div हमेशा पृष्ठ के नीचे समाप्त हो। के बीच कोई अंतर नहीं है। तो मैंने स्थिति जोड़ने की कोशिश की: निश्चित, नीचे: 0 और ऊंचाई: 100% लेकिन फिर चौड़ाई खराब हो गई और यह पृष्ठ के आकार को संभाल नहीं सकता। तो मैं दूसरे div को पृष्ठ तल पर समाप्त करने के लिए कैसे बाध्य कर सकता हूं?

0
Jedi Schmedi 25 अक्टूबर 2017, 23:43

2 जवाब

सबसे बढ़िया उत्तर

आप ऊंचाई और मार्जिन का उपयोग कर सकते हैं।

Boostrap वर्ग: .h-100 height:100% सेट करता है, लेकिन माता-पिता को एक ऊंचाई की आवश्यकता होती है जहां से% की गणना की जा सकती है (html और शरीर के लिए सीएसएस जोड़ा गया)

मार्जिन-टॉप: ऑटो और बॉटम 0 नीचे दूसरा एलिमेंट भेजेगा। उपयोग की गई बूस्टरप कक्षाएं : mt-auto mb-0

html,
body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
  <div class="row h-100"><!-- class added -->
    <div class="col-12">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-12 mb-0 mt-auto"><!-- class added -->
      <div class="card card-shadow" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>

या क्या आपको विस्तार करने के लिए दूसरे div की आवश्यकता है?

html,
body {
  height: 100%;
}

.custom-flex {
  flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
  <!-- class added -->
  <div class="d-flex flex-column h-100">
    <div class="">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column custom-flex">
      <div class="card card-shadow custom-flex" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>
1
G-Cyrillus 26 अक्टूबर 2017, 00:17

मुझे लगता है कि इस प्रश्न का उत्तर कार्ड के सीएसएस को बदलना होगा। यदि आप ऊपर या नीचे से कार्ड के बीच की जगह को बढ़ाना या घटाना चाहते हैं तो आपको सीएसएस को इस तरह बदलना चाहिए:

आपके मामले में कार्ड छाया के लिए यह होगा

.d-flex [class*='card-shadow'] {
   margin-top: 2.5em;
   margin-bottm: 2.5em;
}

सीएसएस गणना एम, पीएक्स या जो भी आपको सूट करता है, के लिए अपनी खुद की इकाई का प्रयोग करें।

0
rayvic 26 अक्टूबर 2017, 01:35