मेरे पास एक HTML टेम्प्लेट है और मैं अपनी डेटा सूची के लिए एक साधारण फ्लेक्स कॉलम बनाना चाहता हूं। मोबाइल डिवाइस पर दूसरी पंक्ति में आने वाला टिक आइकन। मैं इसे बिना लाइन ब्रेक के एक ही पंक्ति में चाहता हूं।

enter image description here

<div class="container disable-text-selection ">
  <div class="row">
    <div class="col-12">
      <div class="mb-3">
        <h1>Vehicle</h1>
        <div class="text-zero top-right-button-container">
          <button type="button" class="btn btn-danger btn-lg top-right-button mr-1"> + ADD NEW VEHICLE </button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12 list" data-check-all="checkAll">
      <div class="card d-flex flex-row mb-3"> 
          <a class="d-flex" href="Pages.Product.Detail.html"> 
            <img src="../../../../assets/img/bike-thumb.jpg" alt="Honda Shine" class="list-thumbnail responsive border-0 card-img-left" /> 
          </a>
        <div class="pl-2 d-flex flex-grow-1 min-width-zero">
          <div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center"> <br>
            <a href="/app/vehicle" class="w-90 w-sm-50">
                 <p class="list-item-heading mb-0 truncate">Honda Shine </p>
                 <span class="text-muted mb-0">Tysys TCP 2223</span>
            </a>
             <div class="w-10 w-sm-50"> 
                 <a class="d-flex justify-content-end" href="#"> <img src="../../../../assets/img/tick-icon.svg" alt="tick" width="30" class=""/> </a> 
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1
Anita Mandal 28 अक्टूबर 2020, 01:26

3 जवाब

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

आपके .card-body में "/ ऐप/वाहन" की ओर इशारा करने वाला एंकर टैग और दूसरे एंकर टैग को लपेटने वाला एक div शामिल है। यदि आप चाहते हैं कि डिव पहले एंकर टैग के साथ एक ही पंक्ति पर हो, तो आपको फ्लेक्स-कॉलम के बजाय .card-body को फ्लेक्स-पंक्ति के रूप में प्रदर्शित करना होगा।

आप <br /> को भी हटाना चाहते हैं।

<div class="card-body d-flex flex-row justify-content-between min-width-zero align-items-center">
    <a href="/app/vehicle" class="w-90 w-sm-50">
        <p class="list-item-heading mb-0 truncate">Honda Shine </p>
        <span class="text-muted mb-0">Tysys TCP 2223</span>
    </a>
    <div class="w-10 w-sm-50"> 
        <a class="d-flex justify-content-end" href="#">
            <img src="https://via.placeholder.com/30" alt="tick" width="30" class=""/>
        </a> 
    </div>
</div>

enter image description here

डेमो: https://jsfiddle.net/davidliang2008/ksg7oz2e/10/

1
David Liang 28 अक्टूबर 2020, 02:05

कार्ड-बॉडी में flex-column flex-lg-row को flex-row में बदलें।

<div class="container disable-text-selection ">
  <div class="row">
    <div class="col-12">
      <div class="mb-3">
        <h1>Vehicle</h1>
        <div class="text-zero top-right-button-container">
          <button type="button" class="btn btn-danger btn-lg top-right-button mr-1"> + ADD NEW VEHICLE </button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12 list" data-check-all="checkAll">
      <div class="card d-flex flex-row mb-3"> 
          <a class="d-flex" href="Pages.Product.Detail.html"> 
            <img src="../../../../assets/img/bike-thumb.jpg" alt="Honda Shine" class="list-thumbnail responsive border-0 card-img-left" /> 
          </a>
        <div class="pl-2 d-flex flex-grow-1 min-width-zero">
          <div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center"> <br>
            <a href="/app/vehicle" class="w-90 w-sm-50">
                 <p class="list-item-heading mb-0 truncate">Honda Shine </p>
                 <span class="text-muted mb-0">Tysys TCP 2223</span>
            </a>
             <div class="w-10 w-sm-50"> 
                 <a class="d-flex justify-content-end" href="#"> <img src="../../../../assets/img/tick-icon.svg" alt="tick" width="30" class=""/> </a> 
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
0
Rafee Shaik 28 अक्टूबर 2020, 09:22

आप मोबाइल डिवाइस के लिए display:flex का उपयोग कर सकते हैं

इस तरह उदाहरण:

@media only screen and (max-width: 600px) {
  body {
    display:flex !important;
  }
}
0
Harish Cholla 28 अक्टूबर 2020, 10:00