আমি বুটস্ট্র্যাপ 4 আলফা 2 ব্যবহার করছি এবং কার্ডগুলিতে সুবিধা নিচ্ছি। বিশেষত, আমি অফিসিয়াল ডক্স থেকে নেওয়া এই উদাহরণটি নিয়ে কাজ করছি । আমি কীভাবে সমস্ত কার্ডকে একই উচ্চতা হিসাবে তৈরি করতে পারি?
আমি এখনই যা ভাবতে পারি তা নিম্নলিখিত সিএসএস বিধিটি সেট করে দিচ্ছে:
.card {
min-height: 200px;
}
তবে এটি কেবল একটি শক্ত কোডড সমাধান যা সাধারণ ক্ষেত্রে কাজ করবে না। আমার দৃষ্টিতে কোডটি ডক্সের মতো একই অর্থাত:
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-xs-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block text-xs-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card">
<img class="card-img" data-src="..." alt="Card image">
</div>
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
এখন পর্যন্ত কোন প্রচেষ্টা? কোন কোড শেয়ার করতে হবে?
—
বাও
সেই উদাহরণটি রাজমিস্ত্রি-জাতীয় কলামগুলির জন্য। স্টাইলের পুরো বিষয়টি হ'ল কার্ডগুলি বিভিন্ন উচ্চতার। যদি আপনি সমান উচ্চতা চান তবে একটি ডেক ব্যবহার করুন এবং ফ্লেক্সবক্স মোড সক্ষম করুন।
—
কোয়ান্টিন
ডেক কেবল একটি সারিতে কার্ডের জন্য কাজ করে। আমি যা চাই তা হ'ল একই প্রভাব
—
ব্লুসার্ফার
card-columnsতবে একই উচ্চতা বজায় রাখা।
