বিভিন্ন উচ্চতার কলাম সহ বুটস্ট্র্যাপ সারি

Question 1

আমার কাছে বর্তমানে এর মতো কিছু রয়েছে:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

এখন ধরে contentনিই যে, একই উচ্চতার বাক্সগুলি ছিল সমস্ত একই প্রস্থ সহ - আমি কীভাবে একই "গ্রিড ভিত্তিক লেআউট" রাখতে পারি এবং এখনও সমস্ত বাক্সগুলি একে অপরের নীচে লাইন রাখতে পারবো না, নিখুঁত লাইনের পরিবর্তে।

বর্তমানে টিডব্লুবিএস col-md-4পূর্ববর্তী তৃতীয় সারির দীর্ঘতম উপাদানটির নীচে পরবর্তী লাইনটি রাখবে thus সুতরাং প্রতিটি আইটেমের সারিটি পুরোপুরি পরিষ্কারভাবে সারিবদ্ধ করা হয় - যদিও এটি দুর্দান্ত I )

Question 2

এটি একটি জনপ্রিয় বুটস্ট্র্যাপ প্রশ্ন, সুতরাং আমি বুটস্ট্র্যাপ 3 এবং বুটস্ট্র্যাপ 4 এর উত্তর আপডেট এবং প্রসারিত করেছি ...

বুটস্ট্র্যাপ 3 " উচ্চতা সমস্যা " ঘটে কারণ কলাম ব্যবহার float:left। যখন কোনও কলামটি "ভাসমান" হয় তা নথির স্বাভাবিক প্রবাহের বাইরে চলে যায়। এটি তার উপস্থিত বাক্সের প্রান্তটি স্পর্শ না করা পর্যন্ত এটি বাম বা ডানে স্থানান্তরিত হবে। সুতরাং, যখন আপনার অসম কলামের উচ্চতা রয়েছে তখন সঠিক আচরণ হ'ল তাদের নিকটবর্তী স্থানে স্ট্যাক করা।

দ্রষ্টব্য : নীচের বিকল্পগুলি কলাম মোড়ানো দৃশ্যের জন্য প্রযোজ্য যেখানে একক ক্ষেত্রে 12 টিরও বেশি ইউনিট রয়েছে.row । যে পাঠকরা বুঝতে পারছেন না কেন কেন কখনও সারিতে 12 টিরও বেশি কোল থাকবে বা সমাধানটি "পৃথক সারি ব্যবহার করা" এটি প্রথমে পড়তে হবে বলে মনে করেন

এটি ঠিক করার কয়েকটি উপায় রয়েছে .. (2018 এর জন্য আপডেট হয়েছে)

1 - এর মতো 'ক্লিয়ারফিক্স' পদ্ধতির ( বুটস্ট্র্যাপ দ্বারা প্রস্তাবিত ) প্রতিটি এক্স কলামে পুনরাবৃত্তি প্রয়োজন । এটি প্রতিটি এক্স সংখ্যক কলামকে মোড়ানোর জন্য বাধ্য করবে ...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

ক্লিয়ারফিক্স ডেমো (একক স্তর)

ক্লিয়ারফিক্স ডেমো (প্রতিক্রিয়াশীল স্তর) - যেমন।col-sm-6 col-md-4 col-lg-3

এখানে একটা হল সিএসএস শুধুমাত্র প্রকরণ 'clearfix' এর
সিএসএস শুধুমাত্র টেবিল সঙ্গে clearfix

2 - কলামগুলি একই উচ্চতায় তৈরি করুন (ফ্লেক্সবক্স ব্যবহার করে):

যেহেতু সমস্যাটি উচ্চতার পার্থক্যের কারণে ঘটেছে , তাই আপনি প্রতিটি সারি জুড়ে কলামগুলি সমান উচ্চতা তৈরি করতে পারেন । এটি করার সেরা উপায় হ'ল ফ্লেক্সবক্স এবং এটি বুটস্ট্র্যাপ 4 এ স্থানীয়ভাবে সমর্থিত ...

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

ফ্লেক্সবক্স সমান উচ্চতা ডেমো

3 - এর পরিবর্তে কলামগুলিকে একটি ইনলাইন-ব্লক ব্যবহার করুন ...

আবার, উচ্চতা সমস্যাটি কেবল তখনই ঘটে কারণ কলামগুলি ভাসমান। আর একটি বিকল্প হ'ল কলামগুলি সেট করে display:inline-blockএবং float:none। এটি উল্লম্ব-প্রান্তিককরণের জন্য আরও নমনীয়তা সরবরাহ করে। যাইহোক, এই সমাধানের সাথে কলামগুলির মধ্যে কোনও HTML শ্বেতস্পেস থাকতে হবে না , অন্যথায় ইনলাইন-ব্লক উপাদানগুলির অতিরিক্ত স্থান রয়েছে এবং অকালটি মোড়ানো হবে।

ইনলাইন ব্লক ফিক্সের ডেমো

4 - CSS3 কলামগুলির পদ্ধতির (সমাধানের মতো রাজমিস্ত্রি / Pinterest) ..

এই বুটস্ট্র্যাপ থেকে 3 নেটিভ নয়, কিন্তু অন্য পদ্ধতির ব্যবহার সিএসএস বহু-কলাম । এই পদ্ধতির একটি নেতিবাচক দিক হ'ল কলাম ক্রমটি বাম-থেকে-ডান পরিবর্তে শীর্ষে-নীচে। বুটস্ট্র্যাপ 4 এ এই ধরণের সমাধান অন্তর্ভুক্ত করে : বুটস্ট্র্যাপ 4 রাজমিস্ত্রি কার্ড ডেমো ।

বুটস্ট্র্যাপ 3 বহু-কলাম ডেমো

5 - রাজমিস্ত্রি জাভাস্ক্রিপ্ট / jQuery পদ্ধতির

অবশেষে, আপনি আইসোটোপ / রাজমিস্ত্রি হিসাবে একটি প্লাগইন ব্যবহার করতে পারেন:

বুটস্ট্রেপ রাজমিস্ত্রি ডেমো
গাঁজনী ডেমো 2

বুটস্ট্র্যাপ পরিবর্তনশীল উচ্চতা কলামগুলিতে আরও

আপডেট 2018
সমস্ত কলামগুলি বুটস্ট্র্যাপ 4-তে সমান উচ্চতা কারণ এটি ডিফল্টরূপে ফ্লেক্সবক্স ব্যবহার করে, সুতরাং "উচ্চতা সমস্যা" কোনও সমস্যা নয়। অতিরিক্তভাবে, বুটস্ট্র্যাপ 4 এ এই ধরণের মাল্টি-কলামগুলি সমাধান অন্তর্ভুক্ত করে: বুটস্ট্র্যাপ 4 গাঁথুনি কার্ড ডেমো ।

Question 3

কোনও কারণে এটি .ডিসপ্লে-ফ্লেক্স শ্রেণি ছাড়াই আমার পক্ষে কাজ করেছে

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

Question 4

আমি বুটস্ট্র্যাপ সারিতে আরও একটি এক্সটেনশন তৈরি করেছি (যা প্রতিক্রিয়াশীল)। আপনি এরকম কিছু চেষ্টা করতে পারেন:

.row.flexRow { display: flex; flex-wrap: wrap;}