मेरे पास एक HTML टेम्प्लेट है और मैं अपनी डेटा सूची के लिए एक साधारण फ्लेक्स कॉलम बनाना चाहता हूं। मोबाइल डिवाइस पर दूसरी पंक्ति में आने वाला टिक आइकन। मैं इसे बिना लाइन ब्रेक के एक ही पंक्ति में चाहता हूं।
<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>
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>
डेमो: https://jsfiddle.net/davidliang2008/ksg7oz2e/10/
कार्ड-बॉडी में 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>
आप मोबाइल डिवाइस के लिए display:flex
का उपयोग कर सकते हैं
इस तरह उदाहरण:
@media only screen and (max-width: 600px) {
body {
display:flex !important;
}
}
संबंधित सवाल
नए सवाल
bootstrap-4
बूटस्ट्रैप 4 लोकप्रिय फ्रंट-एंड कंपोनेंट लाइब्रेरी का चौथा प्रमुख संस्करण है। बूटस्ट्रैप उत्तरदायी, मोबाइल-प्रथम वेबसाइटों और वेब एप्लिकेशन के निर्माण में सहायता करता है।