আমি কীভাবে বুটস্ট্র্যাপ কলামগুলি একই উচ্চতায় তৈরি করতে পারি?

Question

আমি বুটস্ট্র্যাপ ব্যবহার করছি। আমি কীভাবে একই উচ্চতায় তিনটি কলাম তৈরি করতে পারি?

সমস্যাটির একটি স্ক্রিনশট এখানে। আমি নীল এবং লাল কলামগুলি হলুদ কলামের সমান উচ্চতা হিসাবে দেখতে চাই।

কোডটি এখানে:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

Comments

stackoverflow.com/questions/24745966/...

— trante

5-লাইনের সমাধান getbootstrap.com.vn/exferences/equal- উচ্চতা- কলামগুলি

— এডুয়ার্ড

বুটস্ট্র্যাপের উদাহরণটি এডুয়ার্ডকে সাড়া দেয়। ফ্লেক্সটি .rowঅনুপস্থিত flex-wrap: wrap;। প্রতিক্রিয়াশীলতার সাথে কাজ করার এটির একটি উদাহরণ এখানে রয়েছে: codepen.io/bststraped/details/RrabNe

— ব্রায়ান উইলিস

সম্ভাব্য ওয়ার্কারআউন্ড - অন্যান্য কলামগুলিতে 1 পিক্সেল প্রশস্ত একটি স্বচ্ছ চিত্র। এই নতুন এক পিক্সেল প্রস্থের চিত্রটি উপরের উদাহরণে বিড়ালদের পিক্সেলের উচ্চতার সাথে মেলে। (আপনার পরিস্থিতিতে কাজ বা ব্যবহারিক ব্যবহার নাও হতে পারে)

— স্কেল সার্ফার

বুটস্ট্র্যাপ 4-এ, আমরা একই কার্ডটি ব্যবহার করতে পারি

— আমজাদ রেহমান এ

Answer 1

বুটস্ট্র্যাপ 4 ব্যবহার করে সমাধান 4

বুটস্ট্র্যাপ 4 টি ফ্লেক্সবক্স ব্যবহার করে তাই অতিরিক্ত সিএসএসের প্রয়োজন নেই।

ডেমো

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

সমাধান 1 নেতিবাচক মার্জিন ব্যবহার করে (প্রতিক্রিয়া ভাঙবে না)

ডেমো

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

সারণী 2 ব্যবহার করে সমাধান করুন

ডেমো

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

সমাধান 3 ফ্লেক্স ব্যবহার করে আগস্ট 2015 যোগ করা হয়েছে this এর আগে পোস্ট করা মন্তব্যগুলি এই সমাধানটিতে প্রযোজ্য না।

ডেমো

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

Comments

এটিকে ভাবুন কলামটি নেতিবাচক জায়গায় ডুবানো হচ্ছে। আপনি যদি ওভারফ্লোটি সরিয়ে ফেলেন তবে আপনি কী দেখছেন তা দেখতে পাবেন।

— পপনুডলস

যদি বিশেষত বুটস্ট্র্যাপ কলাম শ্রেণীকে লক্ষ্য করে করা হয় তবে আপনার সম্ভবত ওয়াইল্ডকার্ড * এর পরিবর্তে একটি অ্যাঙ্কর ব্যবহার করা উচিত। Using ব্যবহার করে ক্লাসটি কল দিয়ে শুরু করতে হবে- যেখানে দেখানো ওয়াইল্ডকার্ড যে কোনও ক্লাসের সাথে কোথাও স্ট্রিংয়ের সাথে মিলবে, সম্ভবত আপনি যেখানে কনভেনশন কল ব্যবহার করেছেন এমন স্টাইলগুলিতে অনাকাঙ্ক্ষিত প্রভাব ফেলবে। (যেমন স্টাফ-কল-মোর স্টাফ)।

— লোগান জি

উত্তম উত্তর, কিছু সতর্কতা সহ। সমাধান 1 ফ্লোটটি অক্ষম করে এবং তাই বুটস্ট্র্যাপ গ্রিডের প্রতিক্রিয়াশীল আচরণটি ভেঙে দেয়। সমাধান 2 (মধ্যে বৃহত্তর গভীরতা ব্যাখ্যা positioniseverything.net/articles/onetruelayout/equalheight ) নিম্ন সীমানা প্রদর্শন করা হয় না (যেমন প্যাডিং স্থান কোথাও ছাঁটা হয় না)।

— ওহাদ স্নাইডার

সমাধান 3 সারি প্রতিক্রিয়াশীলতা বিরতি দেয়।

— এসপিআরবিএনএন

প্রতিক্রিয়াশীলতা সক্রিয় করতে আপনার পপনুডলগুলি flex-wrap: wrap;তৃতীয় উদাহরণে যুক্ত করা উচিত । আপনি প্রদর্শন যোগ করতে চাইবেন: ফ্লেক্স; নমনীয় দিক: কলাম; কলাম শ্রেণিতে। যদি আপনি .আর এবং কোনও কাস্টম ক্লাস না ব্যবহার করতে চলেছেন তবে আপনাকে পুরানো ব্রাউজারগুলির জন্য ডিসপ্লে ফ্লেক্স ফিরে পরিবর্তন করতে একটি ফলব্যাক সরবরাহ করতে হবে। এখানে একটি উদাহরণ দেওয়া হয়েছে

— ব্রায়ান উইলিস

Answer 2

আপডেট 2020

বুটস্ট্যাপ ৩.x এর জন্য সেরা পদ্ধতির - সিএসএস ফ্লেক্সবক্স ব্যবহার করে (এবং সর্বনিম্ন সিএসএসের প্রয়োজন) ..

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

বুটস্ট্র্যাপ একই উচ্চতার ফ্লেক্সবক্স উদাহরণ

নির্দিষ্ট ব্রেকপয়েন্টে (প্রতিক্রিয়াশীল) কেবল একই উচ্চতার ফ্লেক্সবক্স প্রয়োগ করতে, একটি মিডিয়া কোয়েরি ব্যবহার করুন। উদাহরণস্বরূপ, এখানে sm(768px) এবং আরও রয়েছে:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

এই সমাধানটি একাধিক সারিগুলির (কলামের মোড়ক) জন্যও ভাল কাজ করে:
https://www.bootply.com/gCEXzPMehZ

অন্যান্য কর্মক্ষেত্রসমূহ

এই বিকল্পগুলি অন্যদের দ্বারা সুপারিশ করা হবে, তবে প্রতিক্রিয়াশীল ডিজাইনের জন্য এটি ভাল ধারণা নয় । এগুলি কেবল সাধারণ একক সারি বিন্যাস w / o কলামের মোড়কের জন্য কাজ করে।

1) বিশাল নেতিবাচক মার্জিন এবং প্যাডিং ব্যবহার করে

২) ডিসপ্লে ব্যবহার করে : টেবিল-সেল (এই সমাধানটি প্রতিক্রিয়াশীল গ্রিডকেও প্রভাবিত করে, তাই tableকলামগুলি উল্লম্বভাবে স্ট্যাক করার আগে একটি @ মিডিয়া ক্যোয়ারী কেবল বৃহত্তর স্ক্রিনে ডিসপ্লে প্রয়োগ করতে ব্যবহৃত হতে পারে )

---

বুটস্ট্র্যাপ 4

ফ্লেক্সবক্স এখন বুটস্ট্র্যাপ 4 এ ডিফল্টরূপে ব্যবহৃত হয় সুতরাং সমান উচ্চতা কলাম তৈরি করার জন্য অতিরিক্ত সিএসএসের প্রয়োজন নেই: http://www.codeply.com/go/IJYRI4LPwU

উদাহরণ:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

Comments

আপনি কেবল বৃহত্তর / বৃহত্তর ডিভাইসে ফ্লেক্সবক্স প্রয়োগ করতে মিডিয়া-ক্যোয়ারী ব্যবহার করতে পারেন। আমি বুটপ্লি আপডেট করেছি: bootply.com/Cn6fA6LuTq

— জিম

যদি কেউ আগ্রহী হন তবে আমি ফ্লেক্সবক্স ব্যবহার করে কোনও ফর্মের অনুরূপ প্রভাবগুলি প্রদর্শনের জন্য একটি কলম তৈরি করেছি।

— জাস্টিন লাউ

এটি ফ্লেক্সবক্স সহ একটি পরিচিত সাফারি বাগ: প্রমাণ: bugs.webkit.org/show_bug.cgi?id=137730

— জিম

@ স্ট্যানলি "আর প্রতিক্রিয়াশীল নয়" সম্পর্কে মন্তব্যটি পুরানো এবং অপ্রাসঙ্গিক।

— জিম

এটি আমার পক্ষে কাজ করা একমাত্র ফিক্স। ধন্যবাদ জিম এটি দুর্দান্ত!

— রায়ান এনজেড

Answer 3

কোন জাভাস্ক্রিপ্ট প্রয়োজন। .row-eq-heightআপনার বিদ্যমানটিতে .rowকেবল ক্লাসটি যুক্ত করুন :

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

টিপ: আপনার সারিতে যদি 12 টিরও বেশি কলাম থাকে তবে বুটস্ট্র্যাপ গ্রিডটি এটি মোড়াতে ব্যর্থ হবে। সুতরাং div.row.row-eq-heightপ্রতিটি 12 টি কলামে একটি নতুন যুক্ত করুন ।

টিপ: আপনার যোগ করার প্রয়োজন হতে পারে

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

আপনার এইচটিএমএল

Comments

flexbox-ভিত্তিক। আইই

— #feat=

দ্রষ্টব্য: getbootstrap.vn "বুটস্ট্র্যাপ" নয়। এটি একটি তৃতীয় পক্ষের প্রকল্প।

— জিম

এটি বুটস্ট্র্যাপ ভি 4 তে সংহত বলে মনে হচ্ছে।

— সিরিল ডুচন-ডরিস

আমি সঠিক সিএসএস অন্তর্ভুক্ত করেছি (.vn সাইট থেকে) তবে এটি সমস্ত কিছু মিস করে। এটি ফ্লেক্স উপর ভিত্তি করে

— এক্কিস

দুর্দান্ত ... প্লাগ ইন

— আরমাডা

Answer 4

আপনার প্রশ্নের উত্তর দেওয়ার জন্য আপনাকে পূর্বনির্ধারিত CSS সহ পূর্ণ প্রতিক্রিয়াশীল ডেমো দেখতে দরকার :

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

উপরের স্ক্রিনশটের মতো ফ্লেক্স কলামগুলির মধ্যে থাম্বনেইল সামগ্রী ফ্লেক্সের জন্য সমর্থন যুক্ত করতে এটি যুক্ত করুন ... নোট আপনি প্যানেলগুলির সাহায্যেও এটি করতে পারেন:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

---

যদিও ফ্লেক্সবক্স আইই ৯ তে কাজ করে না এবং নীচে আপনি পলফিল হিসাবে জাভাস্ক্রিপ্ট গ্রিডের মতো কিছু সহ শর্তযুক্ত ট্যাগ ব্যবহার করে ফ্যালব্যাকের সাহায্যে ডেমো ব্যবহার করতে পারেন :

<!--[if lte IE 9]>

<![endif]-->

গ্রহণযোগ্য উত্তরের অন্যান্য দুটি উদাহরণ হিসাবে ... টেবিল ডেমোটি একটি শালীন ধারণা তবে ভুলভাবে প্রয়োগ করা হচ্ছে। বিশেষত বুটস্ট্র্যাপ কলাম ক্লাসে সিএসএস প্রয়োগ করা নিঃসন্দেহে গ্রিড কাঠামো পুরোপুরি ভেঙে ফেলবে। আপনি এক এবং দুটি জন্য একটি কাস্টম নির্বাচনকারী ব্যবহার করা উচিত টেবিল শৈলী [class*='col-']যে প্রস্থ সংজ্ঞায়িত হয়েছে প্রযোজ্য করা উচিত নয় । আপনি যদি সমান উচ্চতা এবং সমান প্রস্থের কলামগুলি চান তবে এই পদ্ধতিটি কেবলমাত্র ব্যবহার করা উচিত। এটি অন্য কোনও লেআউটের জন্য নয় এবং প্রতিক্রিয়াশীল নয়। মোবাইল ডিসপ্লেতে আমরা এটিকে ফ্যালব্যাক করতে পারি ...

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>

@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

শেষ অবধি, গৃহীত উত্তরের প্রথম ডেমো যা একটি সত্য লেআউটটির একটি সংস্করণ প্রয়োগ করে তা কিছু পরিস্থিতিতে উপযুক্ত পছন্দ তবে বুটস্ট্র্যাপ কলামের জন্য উপযুক্ত নয়। এর কারণ হ'ল সমস্ত কলামগুলি ধারক উচ্চতায় প্রসারিত হয়। সুতরাং এটি প্রতিক্রিয়াও ভঙ্গ করবে যেহেতু কলামগুলি তাদের পাশের উপাদানগুলিতে প্রসারিত হচ্ছে না, তবে সম্পূর্ণ ধারক। এই পদ্ধতিটি আপনাকে আর সারিগুলিতে নীচের মার্জিনগুলি প্রয়োগ করতে দেয় না এবং অ্যাঙ্কার ট্যাগগুলিতে স্ক্রোলিংয়ের মতো পথে অন্যান্য সমস্যাও সৃষ্টি করে।

সম্পূর্ণ কোডের জন্য কোডপেনটি দেখুন যা স্বয়ংক্রিয়ভাবে ফ্লেক্সবক্স কোডটিকে উপস্থাপিত করে।

Comments

এটিই কেবলমাত্র একটি উত্তর যা আসলে আমার পক্ষে কাজ করেছিল। 3 শীর্ষ রেট করা উত্তরগুলি কেবল সময়ের অপচয় ছিল

— কেন

দেখতে দুর্দান্ত লাগছে, তবে দুর্ভাগ্যক্রমে এটি ম্যাকওএসে সাফারি 9.1 তে কাজ করে না :-(

— কেভিনএইচ

@ দ্য চেচেক এখানে ঠিক আছে। আমি যতদূর জানি এটি এখন সমস্ত ফ্লেক্সবক্স সমর্থিত ব্রাউজারগুলিতে কাজ করে। আমি ভুল হলে আমাকে জানাবেন। s.codepen.io/bootstraped/debug/pboJNd । সমস্যাটি row:after, row:beforeডিসপ্লে থাকার সাথে সম্পর্কিত ছিল : টেবিল সেট যা আপাতভাবে সাফারি পছন্দ করে না।

— ব্রায়ান উইলিস

কেবল একটি মাথা উপরে উঠে গেছে যে এটি আইপ্যাডের সাফারি ব্রাউজারে সত্যিই খারাপভাবে ভেঙে যায়

— ম্যাথু লক

@ ম্যাথেজ লক শুনে দুঃখিত। আমি সর্বাধিক সাফারি দিয়ে আমার আইপ্যাড এয়ার আইওএস 8.1 তে পরীক্ষা করেছি এবং এটি এতে কাজ করে। আমি সাফারি with এর সাথে আইপ্যাড মিনি রেটিনা ব্যবহার করে ক্রসব্রোসারেস্টিং ডটকমেও পরীক্ষা করতে সক্ষম হয়েছি এবং এটিও ঠিকঠাক কাজ করছে বলে মনে হচ্ছে। এখানে এই পরীক্ষার ফলাফল । আপনি যে আইপ্যাড এবং সাফারি সংস্করণটি ব্যবহার করছেন তা সরবরাহ করতে পারেন? আমি এই স্থির asap পেতে চেষ্টা করতে চাই বা কমপক্ষে উত্তরে একটি মন্তব্য করা উচিত কারণ আমি জানি যে অনেক লোক এটি ব্যবহার করছে।

— ব্রায়ান উইলিস

Answer 5

আপনি কেবল একটি সারি দেখান যাতে আপনার ব্যবহারের ক্ষেত্রে কেবল সীমাবদ্ধ থাকে। আপনার যদি একাধিক সারি থাকে তবে এই প্লাগইনটি - গিথুব জাভাস্ক্রিপ্ট-গ্রিডগুলি পুরোপুরি কাজ করে! এটি প্রতিটি প্যানেলকে দীর্ঘতম প্যানেলে প্রসারিত করে, প্রতিটি সারিটি সেই সারিটির দীর্ঘতম প্যানেলের উপর ভিত্তি করে পৃথক উচ্চতা দেয়। এটি একটি জ্যাকোরি সমাধান বনাম সিএসএস, তবে এটি বিকল্প পদ্ধতির হিসাবে সুপারিশ করতে চেয়েছিল।

Comments

একমাত্র সমাধান যা সত্যই কাজ করে এবং এটি প্রতিক্রিয়াশীলতা ভঙ্গ করে না

— আর্তুর কেডজিওর

এটি কি আপনাকে নির্দিষ্ট করতে দেয় যে কলামগুলি বর্গক্ষেত্র হওয়া উচিত - বা কেবল সমস্ত উচ্চতা?

— নিকো

@niico 14 - এটি ব্যবহার করার পরে কিছুক্ষণ হয়ে গেছে, তবে আমার প্রয়োগের ক্ষেত্রে প্রয়োজনীয়তাটি হ'ল প্রতিটি সারির উপাদানগুলি একই উচ্চতা ছিল তবে উচ্চতাটি সারি থেকে এক সারি পরিবর্তিত হতে পারে। যেহেতু উচ্চতাটি সারির উপাদানগুলির একটি ফাংশন, যদি আপনার উপাদানটির উচ্চতা তাদের প্রস্থের সমান হয়, তবে তাদের স্কোয়ার হিসাবে উপস্থিত করা উচিত।

— GlobalSchmidt

Answer 6

আপনি যদি কোনও ব্রাউজারে এই কাজটি করতে চান তবে জাভাস্ক্রিপ্ট ব্যবহার করুন:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

Comments

"কল-এমডি -4" ক্লাসের প্রতিটি প্যানেলে পরিবর্তনশীল সংখ্যার সাথে একটি ডিভ ক্লাস = "সারি" রাখুন যা আমি তালিকাবদ্ধ করতে চাই এমন আইটেমের সংখ্যার উপর নির্ভর করে 3 টি কলাম এবং সারিগুলির অজানা সংখ্যা দিতে হবে। এই জেএস কাজ করেছে এবং আমার চেষ্টা করা বিভিন্ন সিএসএস জিনিসগুলির বিপরীতে আমার এইচটিএমএল / সিএসএসে ন্যূনতম পরিবর্তন প্রয়োজন। আমি পরিবর্তন করেছি কেবলমাত্র আমার সমস্ত কলাম প্যানেলকে অতিরিক্ত শ্রেণি দ্বারা চিহ্নিত করা, অর্থাত "" একই উচ্চতা-প্যানেল "এবং তারপরে $ ("। প্যানেল ") এর পরিবর্তে $ ("। একই উচ্চতা-প্যানেল ") ব্যবহার করুন

— নিদালপ্রেস

একমাত্র সমাধান যা সিএসএস স্টাফ নিয়ে পরীক্ষার একদিন পরে আমার পক্ষে কাজ করেছিল।

— Dinosaurius

এটি একটি ভাল সমাধান, তবে .ready()এটি কল করার সঠিক সময় নয় - এটি কল করা উচিত.load()

— jave.web

@ জাভে.ওয়েব যদি আপনি মনে করেন যে এটি একটি ভাল সমাধান, তবে দয়া করে এটি থাম্ব আপ করুন। ধন্যবাদ

— পোলাক্লেক্সান্দ্রু

window.onload = function() {...function content above...}পরিবর্তে ব্যবহার করুন। এটি আরও ভাল কাজ করে।

— ব্ল্যাকপ্যান্থের 10001

Answer 7

আমি এই থ্রেড এবং অন্যান্য পৃষ্ঠাগুলিতে প্রদত্ত পরামর্শগুলির প্রচুর চেষ্টা করেছিলাম তবে প্রতিটি ব্রাউজারে কোনও সমাধান 100% কার্যকর হয়নি।

তাই আমি বেশ কিছু সময় পরীক্ষা নিরীক্ষা করেছি এবং এটি নিয়ে এসেছি। শুধুমাত্র 1 ক্লাস সহ ফ্লেক্সবক্সের সাহায্যে বুটস্ট্র্যাপ সমান উচ্চতা কলামগুলির জন্য একটি সম্পূর্ণ সমাধান । এটি সমস্ত বড় ব্রাউজারে IE10 + কাজ করে।

সিএসএস:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

এইচটিএমএল:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

IE এর আরও বেশি সংস্করণ সমর্থন করতে আপনি উদাহরণস্বরূপ https://github.com/liabru/jquery-match- উচ্চতা ব্যবহার করতে পারেন এবং এর সমস্ত শিশু কলামগুলি লক্ষ্যবস্তু করতে পারেন .equal-cols। এটার মত:

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

এই পলিফিল ব্যতীত কলামগুলি বুটস্ট্র্যাপ কলামগুলির মতো স্বাভাবিক আচরণ করবে যাতে এটি বেশ ভাল ফলব্যাক।

Comments

এটি আমার পক্ষে উজ্জ্বলতার সাথে কাজ করেছে। ধন্যবাদ!

— র্যান্ডলেট

Answer 8

আপনি পাশাপাশি ইনলাইন-ফ্লেক্সও ব্যবহার করতে পারেন যা বেশ ভাল কাজ করে এবং সিএসএসের মাধ্যমে প্রতিটি সারি উপাদান সংশোধন করার চেয়ে কিছুটা ক্লিনার হতে পারে।

আমার প্রকল্পের জন্য আমি প্রতিটি সারিটিতে চেয়েছিলাম যার সন্তানের উপাদানগুলির সীমানা একই উচ্চতা হিসাবে যাতে সীমানাগুলি খাঁজকাটে দেখায়। এর জন্য আমি একটি সাধারণ সিএসএস ক্লাস তৈরি করেছি।

.row.borders{
    display: inline-flex;
    width: 100%;
}

Comments

সারিতে থাকা সমস্ত সামগ্রী একই উচ্চতায় তৈরি করতে সাফল্য পাওয়া যায়; এটি বুটস্ট্র্যাপের সাড়া জাগায়।

— ক্রিস্টিন

Answer 9

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

থেকে:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

Comments

এখন পর্যন্ত দেখা সেরা উপায়।

— ভিভেক্স

Answer 10

কারও আগ্রহী হলে গালমন্দ জেকোয়ারি সমাধান কেবলমাত্র নিশ্চিত হয়ে নিন যে আপনার সমস্ত কলস (এল) এর একটি সাধারণ শ্রেণিকাম আছে ... আপনি যদি এটি $ (উইন্ডো) তে আবদ্ধ করেন তবে প্রতিক্রিয়াশীলও কার্যকরভাবে কাজ করে res

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

ব্যবহার

$(document).ready(function(){
   equal_cols('.selector');
});

---

দ্রষ্টব্য: এই পোস্টটি @ ক্রিসের মন্তব্য অনুসারে সম্পাদনা করা হয়েছে যে কোডটি কেবল $.each()ফাংশনে সর্বশেষ সর্বোচ্চ উচ্চতা নির্ধারণ করেছিল

Comments

এটি নিম্নরেখাযুক্ত - সহজ এবং ছোট তবুও একটি সারিতে নির্দিষ্ট সংখ্যক কলামের প্রয়োজন ছাড়াই সমস্ত কলামকে পুনরায় আকার দেবে। সুন্দর!

— জর্ডন

এটি কাজ করছে না, কারণ প্রতিটি ফাংশনে আপনি সর্বশেষতম উচ্চতা নির্ধারণ করুন। যদি তৃতীয় কলামটি সর্বাধিক কলাম হয়, কলাম 1 এবং 2 সঠিক উচ্চতা পাচ্ছে না .. আপনাকে শেষ লাইন "$ (এটি) .css (height 'উচ্চতা': h}) সেট করতে হবে;" প্রতিটি ফাংশন পরে। আমি একটি সম্পাদনা করব।

— ক্রিস

Answer 11

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

<div class="row row-eq-height-xs">Your Content Here</div>

সমস্ত পর্দার জন্য:

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

যখন আপনি এসএম ব্যবহার করতে চান:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

আপনি যখন এমডি করতে চান তার জন্য:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

আপনি কখন এলজি ব্যবহার করতে চান তার জন্য:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

সম্পাদনা একটি মন্তব্যের উপর ভিত্তি করে, সত্যিই একটি সহজ সমাধান রয়েছে, তবে আপনাকে অবশ্যই সমস্ত আকারের জন্য সর্বাধিক কাঙ্ক্ষিত প্রস্থ থেকে এক্স এর মধ্যে কলাম তথ্য দিতে হবে (যেমন <div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Comments

আপনি যা প্রয়োজন তার চেয়ে অনেক জটিল করে ফেলেছেন :) use কেবলমাত্র flex-wrap: wrap;তখনই ব্যবহার করুন আপনার সমস্ত আলাদা আলাদা প্রয়োজন হবে না ... যদি না আপনি নির্দিষ্টভাবে চান।

— ব্রায়ান উইলিস

এটি আইপ্যাড সাফারিতে ব্যর্থ হয়

— ম্যাথু লক

Answer 12

আমি অবাক হয়েছি যে আমি এখানে 2018 এর শেষ দিকে একটি উপযুক্ত সমাধান খুঁজে পাই না I আমি এগিয়ে গিয়ে এটি নিজেই ফ্লেক্সবক্স ব্যবহার করে একটি বুটস্ট্র্যাপ 3 সমাধান বের করেছিলাম।

পরিষ্কার এবং সহজ উদাহরণ:

এইচটিএমএল

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

সিএসএস

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

কাজের ডেমো দেখুন: http://jsfiddle.net/5kmtfrny/

Answer 13

আমি জানি আমি খুব দেরী করেছি তবে এখন আপনি আপনার উদ্দেশ্য অর্জনের জন্য "ন্যূনতম-উচ্চতা" শৈলীর বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

Answer 14

বুটস্ট্র্যাপ 4 এবং খুঁজছেন ব্যবহার সমান উচ্চতা কলামের জন্য যে কেউ মাত্র ব্যবহার করেন তাহলে row-eq-heightপিতা বা মাতা DIV আছে করতে

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

তথ্যসূত্র: http://getbootstrap.com.vn/example/equal- উচ্চতা- কলামগুলি /

Answer 15

এখানে আমার সমাধান (সংকলিত সিএসএস) রয়েছে:

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

সুতরাং আপনার কোডটি দেখতে চাই:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

মূলত এটি একই সিস্টেম যা আপনি .col-*ক্লাসগুলির সাথে ব্যবহার করেন সেই পার্থক্য সহ আপনার .row-*নিজের সারিতে ক্লাস প্রয়োগ করতে হবে ।

.row-sm-eqকলামগুলির সাথে এক্সএস স্ক্রিনে স্ট্যাক করা হবে। আপনি ব্যবহার করতে পারেন আপনি তাদের প্রয়োজন না থাকে তাহলে কোনো স্ক্রিনে স্তুপীকৃত করা .row-xs-eq।

SASS সংস্করণ যা আমরা আসলে ব্যবহার করি:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

সরাসরি নমুনা

---

দ্রষ্টব্য: একক সারিতে মেশানো .col-xs-12এবং .col-xs-6ভিতরে থাকা সঠিকভাবে কাজ করবে না।

Comments

এটা ভাল. আমার সমাধান একই। এবং স্ট্যান্ডার্ড বুটস্ট্র্যাপের 30px ফাঁক সমান উচ্চতা কলামগুলি কলামগুলি ব্যবহার করে border-spacingএবং নেতিবাচক মার্জিনের মধ্যে থাকার সম্ভাবনা রয়েছে।

— সর্বাধিক

Answer 16

সারিগুলিতে কেবলমাত্র কলামে প্রয়োগ করার সময় সমাধান 1 ব্যবহার করে একটি সমস্যা আছে। সমাধান 1 উন্নত করতে চাই।

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(দুঃখিত, পপনুডলস এর অ্যাভেয়ার মন্তব্য করতে পারবেন না। আমার যথেষ্ট সুনাম নেই)

Answer 17

সেখানে সেরা:

গিথুব রিফ্লেক্স - ডক্স

বুটস্ট্র্যাপের সাথে কাজ করে

হালনাগাদ:

1. সিএসএস অন্তর্ভুক্ত করুন
2. আপনার কোড আপডেট করুন:

/*!
 *
 * Reflex v1.0
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: [e-mail]
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

Comments

স্ট্যাক ওভারফ্লোতে স্বাগতম! যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে। আমি কিভাবে একটি ভাল উত্তর লিখুন দেখুন ।

— বাইটহ্যামস্টার

Answer 18

আমার পদ্ধতিটি এখানে, আমি মিডিয়া ক্যোয়ারিতে কিছু পরিবর্তন সহ ফ্লেক্স ব্যবহার করেছি।

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

তারপরে প্রয়োজনীয় পিতামাতাদের সাথে ক্লাস যুক্ত করলেন।

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

আমি প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলি ব্যবহার করছি কারণ ফ্লাক্স সাধারণত বুটস্ট্র্যাপের মানক প্রতিক্রিয়াশীল প্রকৃতিকে বাধা দেয়।

Answer 19

আমি এই সুপার ইজিল সলিউশনটি সাথে ব্যবহার করি clearfix, যার কোনও পার্শ্ব প্রতিক্রিয়া নেই।

এখানে AngularJS এর ​​একটি উদাহরণ দেওয়া হল:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

এবং পিএইচপি-তে আরও একটি উদাহরণ:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>

Comments

যদিও এটি আপনার কলামগুলি একই উচ্চতায় তৈরি করে না।

— স্কিরিট

আমার জন্য একই উচ্চতায় / সারিতে স্থানে কলাম থাকতে চাই এটি একটি সমাধান

— মাইকেল - ওয়েরেডা নেট

Answer 20

যারা দ্রুত, সহজ সমাধান খুঁজছেন তাদের জন্য - আপনার কাছে ডিভের উপর একটি ন্যূনতম উচ্চতা নির্ধারণকারী ব্লক সামগ্রীর তুলনামূলকভাবে সামঞ্জস্যপূর্ণ সেট রয়েছে যা সবচেয়ে বড় ব্লকের চেয়ে কিছুটা বড় এবং কার্যকর করা সহজ।

.align-box {
    min-height: 400px;
}

Answer 21

.row.container-height {
	overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

যেখানে। কনটেনার-উচ্চতা শৈলীর শ্রেণি যা একটি .রো স্টাইলযুক্ত উপাদানতে যুক্ত করতে হয় যেখানে এর সমস্ত .col * শিশুদের উচ্চতা একই থাকে।

এই স্টাইলগুলি শুধুমাত্র কিছু নির্দিষ্ট .row (উদাহরণস্বরূপ। কন্টেইনার-উচ্চতার সাথে) প্রয়োগ করাও মার্জিনটি প্রয়োগ করতে এবং সমস্ত .col * এ প্যাডিং ওভারফ্লো প্রয়োগ করতে এড়িয়ে চলে।

Answer 22

আমি একই সমস্যার সমাধান অনুসন্ধান করেছি এবং সন্ধান পেয়েছি মাত্র একটিতে কাজ করেছে !! - প্রায় কোনও অতিরিক্ত কোড সহ ..

একটি ভাল ডিস্কিউশনের জন্য https://medium.com/wdstack/bootstrap-equal-height-colouts-d07bc934eb27 দেখুন এবং একটি লিঙ্কের সাথে নীচে আপনি যে রিসোপনটি চান তা দিয়ে।

https://www.codeply.com/go/EskIjvun4B

এটি আমার জন্য সঠিক প্রতিক্রিয়াশীল উপায় ছিল ... একটি উক্তি: ... 3 - ফ্লেক্সবক্স ব্যবহার করুন (সেরা!)

2017 হিসাবে, একটি প্রতিক্রিয়াশীল ডিজাইনে সমান উচ্চতা কলাম তৈরি করার সর্বোত্তম (এবং সবচেয়ে সহজ) উপায়টি CSS3 ফ্লেক্সবক্স ব্যবহার করছে।

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

এবং সহজভাবে ব্যবহার করুন:

div class="container">
   <div class="row display-flex .... etc..

Answer 23

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

উদাহরণ:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

বেশ কয়েকটি উত্তর থেকে এখানে অভিযোজিত। আইই 8 এবং 9 মারা গেলে এবং অ্যান্ড্রয়েড 2.x একবার মারা গেলে ফ্লেক্সবক্স-ভিত্তিক উত্তরগুলি সঠিক উপায়ে হয়, তবে এটি 2015 সালে সত্য নয় এবং সম্ভবত ২০১ 2016 সালে হবে না IE আপনি কীভাবে পরিমাপ করেন তার উপর নির্ভর করে 6% ব্যবহার এবং অনেক কর্পোরেট ব্যবহারকারীদের জন্য এটি আরও খারাপ। http://caniuse.com/#feat=flexbox

display: table, display: table-cellকৌতুক আরো পিছন সামঞ্জস্যপূর্ণ - এবং এক মহান জিনিস কেবল গুরুতর সামঞ্জস্য ইস্যু সাফারি ইস্যু যেখানে এটি বাহিনী হয় box-sizing: border-box, কিছু ইতিমধ্যে আপনার বুটস্ট্র্যাপ ট্যাগ প্রয়োগ করা হয়েছে। http://caniuse.com/#feat=css-table

আপনি সম্ভবত আরো শ্রেণীর অনুরূপ কিছু করার মত যোগ করতে পারেন .equal-height-md। আমার সীমিত ব্যবহারের ক্ষেত্রে ছোট পারফরম্যান্সের সুবিধার জন্য আমি এগুলি ডিভগুলিতে বেঁধেছি, তবে আপনি ট্যাগটি অপসারণ করতে পারেন যাতে এটি অন্যান্য বুটস্ট্র্যাপের মতো আরও সাধারণীকরণ করা যায়।

নোট করুন যে এখানে jsfiddle সিএসএস ব্যবহার করে, এবং তাই, অন্যথায় কম সরবরাহ করবে এমন জিনিসগুলি লিঙ্কযুক্ত উদাহরণে হার্ড-কোডড। উদাহরণস্বরূপ @ স্ক্রিন-এসএম-মিনিট কম কী সন্নিবেশ করবে তার সাথে প্রতিস্থাপন করা হয়েছে - 768px।

Answer 24

যদি এটি আপনার প্রসঙ্গে উপলব্ধি করে তবে আপনি প্রতিটি বিরতির পরে কেবল একটি খালি 12-কলাম ডিভ যুক্ত করতে পারেন, যা আপনার সারিটির দীর্ঘতম সেলটির নীচে আলিঙ্গনকারী একটি বিভাজক হিসাবে কাজ করে।

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

আশাকরি এটা সাহায্য করবে!

Comments

এই যে প্রশ্ন করেছিলেন তার উত্তর দেয় না!

— এলিসান

Answer 25

ভেবেছিলাম আমি কেবল যুক্ত করব যে ডাঃফ্লিংকের দেওয়া উত্তরটি একটি বুটস্ট্র্যাপ 3 ব্লকেও প্রয়োগ করা form-horizontalযেতে পারে - আপনি যদি প্রতিটি কক্ষের জন্য ব্যাকগ্রাউন্ড রঙ ব্যবহার করতে চান তবে এটি খুব সহজ হতে পারে। বুটস্ট্র্যাপ ফর্মগুলির জন্য এটি কাজ করার জন্য আপনাকে ফর্মের সামগ্রীগুলি মোড়ানো দরকার যা কেবল সারণির মতো কাঠামোর প্রতিরূপ তৈরি করতে পারে।

নীচের উদাহরণটি সিএসএসও সরবরাহ করে যা একটি অতিরিক্ত মিডিয়া ক্যোয়ারী প্রদর্শন করে যে বুটস্ট্র্যাপ 3টিকে কেবল টেকওভার করার অনুমতি দেয় এবং এটি ছোট পর্দার (গুলি) এ স্বাভাবিক জিনিস। এটি IE8 + এও কাজ করে।

উদাহরণ:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>

.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}

Answer 26

ফ্লেক্স-বক্সের মাধ্যমে এটি করার চেষ্টা করুন

.container {
	display: flex;
	padding-bottom: 50px;
}
.col {
	background: blue;
	padding: 30px;
}

.col.center {
	background: red;
	height: 100px;
	margin-bottom: -50px;
}

<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

লাইভ জেএসফিডাল - https://jsfiddle.net/grinmax_/spsn4fnq/

Answer 27

সুতরাং হ্যাঁ, বুটস্ট্র্যাপ 4 সমস্ত স্তম্ভকে একটি সারিতে সমান উচ্চতায় তৈরি করে, তবে আপনি যদি সারিটির ভিতরে থাকা সামগ্রীর চারপাশে একটি সীমানা তৈরি করে থাকেন তবে দেখতে পাবেন যে এটি কলস সমান উচ্চতা নয় appears

আমি যখন height: 100%করনের অভ্যন্তরের উপাদানটিতে প্রয়োগ করেছি তখন আমি দেখতে পেলাম যে আমি আমার মার্জিনটি হারিয়ে ফেলেছি।

আমার সমাধানটি হল কর্নের ডিভের প্যাডিং ব্যবহার করা (অভ্যন্তরীণ উপাদানের প্রান্তিক পরিবর্তে) margin তাই ভালো:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

উপরের কোড উদাহরণটিতে সীমানা সহ নয়টি বাক্সের সেট তৈরি করতে বুটস্ট্র্যাপ 4.1 ব্যবহার করা হয়েছে

Answer 28

এইচটিএমএল

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

সিএসএস

.option2 { background: red; border: black 1px solid; color: white; }

জাতীয়

$('.option2').css({
    'height': $('.option2').height()
});

Answer 29

03/19/2019

** বুটস্ট্র্যাপ 4 সমান উচ্চতা সমাধান **

সমান উচ্চতার জন্য বুটস্ট্র্যাপ ইউটিলিটিস / ফ্লেক্স

কোডেপেনে লাইভ উদাহরণ

প্যারেন্ট ডিভ ফিক্সযুক্ত heightবা বুটস্ট্র্যাপ শ্রেণীর দ্বারা সমান উচ্চতাmin-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}
.fixed-height-200 {
  min-height: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<br><br><br>
<div class="d-flex align-content-stretch flex-wrap fixed-height-200">
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight bg-danger">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-info">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-primary">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
</div>

Comments

আপনি আমাকে নেতিবাচক ভোট কেন দিচ্ছেন। আপনি কি এর জন্য একটি মন্তব্য করতে পারেন?

— এমডি আশিক

Answer 30

আপনি একটি ডিভের মধ্যে কলামগুলি মোড়ানো করতে পারেন

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>

Comments

কলামগুলির মধ্যে একটিতে বোতামটি নিয়ে আমার পক্ষে কাজ হয়নি।

— রায় হান্টার