बूटस्ट्रैप 5 कार्ड हेडर में टेक्स्ट प्राप्त करना दाएं संरेखित

Question

मेरे पास बूटस्ट्रैप 5 में एक कार्ड है, और मैं चाहूंगा कि हेडर की कुछ सामग्री सही संरेखित हो, और अन्य सामग्री को संरेखित किया जाए। अब तक सब कुछ वाम-संरेखित है, चाहे मैं कुछ भी करूं।

यहाँ कुछ नमूना कोड है:

  <div class="card">
    <div class="card-header">
      <a href="/users">Users</a>
      <span class="text-end text-muted">
             48
      </span>
    </div>
    <div class="card-body">
       <p>Card content</p>
    </div>
  </div>

अब तक span में मैंने text-end, float-right, और pull-right की कोशिश की है लेकिन इसका कोई असर नहीं हुआ है। सब कुछ वामपंथी है।

आप सभी की मदद के लिए बहुत-बहुत धन्यवाद।

साथ ही, इस प्रकार के विषय के बारे में कई प्रश्न हैं, लेकिन अधिकांश उदाहरण बूटस्ट्रैप 4 में हैं। मैं बूटस्ट्रैप 5 के लिए कुछ विशिष्ट खोज रहा हूं, क्योंकि बूटस्ट्रैप 4 उदाहरण काम नहीं कर रहे हैं।

css twitter-bootstrap bootstrap-5

0

Jonathan Bechtel 19 अक्टूबर 2021, 06:06

Answer 1

अन्य बूटस्ट्रैप 5 उत्तर हैं इस तरह। RTL समर्थन के लिए बूटस्ट्रैप 5 में बाएं और दाएं के सभी उपयोगों को प्रारंभ और समाप्त से बदल दिया गया है...

आपके मामले में float-end... का उपयोग करना सबसे आसान तरीका है।

    <div class="card">
        <div class="card-header">
            <a href="/users">Users</a>
            <span class="float-end text-muted"> 48 </span>
        </div>
        <div class="card-body">
            <p>Card content</p>
        </div>
    </div>

या, d-flex और फिर ऑटो मार्जिन (ms-auto) का उपयोग करके कार्ड-हेडर फ्लेक्सबॉक्स बनाएं...

   <div class="card">
        <div class="card-header d-flex">
            <a href="/users">Users</a>
            <span class="ms-auto text-muted"> 48 </span>
        </div>
        <div class="card-body">
            <p>Card content</p>
        </div>
   </div>

डेमो

1

Zim 19 अक्टूबर 2021, 15:53

Answer 2

<div class="card ">
    <div class=" card-header">
        <a href="/users">Users</a>
        <span class="float-end text-muted">
            48
        </span>
    </div>
    <div class="card-body">
        <p>Card content</p>
    </div>
</div>

यो शीर्षलेख की सामग्री को सही होने के लिए भी स्थानांतरित कर सकता है

  <div class="card ">
        <div class=" card-header text-end">
            <a href="/users">Users</a>
            <span class="float-end text-muted">
                48
            </span>
        </div>
        <div class="card-body">
            <p>Card content</p>
        </div>
    </div>

1

Md.Ashraful Islam 19 अक्टूबर 2021, 08:00

Answer 3

यह Flex के साथ किया जा सकता है।
.d-flex को .card-header पर फिर .ms-auto को <span> पर लागू करें, जिसे आप दाईं ओर रखना चाहते हैं।

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="card">
  <div class="card-header d-flex">
    <a href="/users">Users</a>
    <span class="ms-auto text-muted">48</span>
  </div>
  <div class="card-body">
    <p>Card content</p>
  </div>
</div>

1

Arleigh Hix 19 अक्टूबर 2021, 08:40

बूटस्ट्रैप 5 कार्ड हेडर में टेक्स्ट प्राप्त करना दाएं संरेखित

3 जवाब

संबंधित सवाल

नए सवाल