css - w3school - what is bootstrap




আমি কিভাবে একই উচ্চতা বুটস্ট্র্যাপ কলাম করতে পারেন? (20)

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

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

এখানে কোডটি রয়েছে:

<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>


2018 আপডেট করুন

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

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

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

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

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

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

অন্যান্য workarounds

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

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

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

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

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


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

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

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

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


আমি অবাক হচ্ছি আমি ২018 সালের শেষদিকে একটি কার্যকর সমাধান খুঁজে পাচ্ছি না। আমি এগিয়ে গিয়েছি এবং এটি একটি ফ্ল্যাশবক্স ব্যবহার করে একটি বুটস্ট্র্যাপ 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/


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


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

.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-* সাথে ব্যবহার করেন। .col-* সেই পার্থক্যগুলির সাথে ক্লাসগুলিকে আপনাকে অবশ্যই প্রয়োগ করতে হবে।

এক্স। এস স্ক্রিনে .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 মেশানো সঠিকভাবে কাজ করবে না।


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

<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>

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

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

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

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


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

<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;
}

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

.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;
    }
}

যখন আপনি md করতে চান:

.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;
    }
}

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

.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;
    }
}

সম্পাদন করুন কোনও মন্তব্যের উপর ভিত্তি করে, প্রকৃতপক্ষে একটি সহজ সমাধান আছে, তবে আপনাকে xs এর সমস্ত মাপের জন্য সর্বাধিক পছন্দসই প্রস্থ থেকে কলামের তথ্য প্রদান করা নিশ্চিত করতে হবে (উদাহরণস্বরূপ <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;
}

সেখানে সেরা আউট:

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

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

হালনাগাদ:

  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: [email protected]
 * 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>


আপনার প্রশ্নের উত্তর দিতে আপনি এই সব prefixed 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%;
}

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

<!--[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%;
    }
}

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

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


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

Demo

.row{
    overflow: hidden; 
}

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

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

Demo

.row {
    display: table;
}

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

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

Demo

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

আপনি একটি div ভিতরে কলাম মোড়ানো করতে পারেন

<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>

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

.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>

লাইভ JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/


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

  @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>

আমি প্রতিক্রিয়াশীল breakpoints ব্যবহার করছি কারণ Flux সাধারণত বুটস্ট্র্যাপ মান প্রতিক্রিয়াশীল প্রকৃতি hampers।


যদি এটি আপনার প্রসঙ্গে ইন্দ্রিয়গ্রাহ্য হয়, তবে আপনি কেবল প্রতিটি বিরতির পরে একটি খালি 1২-কলাম ডিভি যোগ করতে পারেন যা আপনার সারির লম্বা কোষের নীচে আলগা করে এমন ডিভাইডার হিসাবে কাজ করে।

<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 -->

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


শুধু বুটস্ট্র্যাপ ডকুমেন্টেশন মাধ্যমে চেক এবং আমি কলাম একই উচ্চতা সমস্যার জন্য সহজ সমাধান খুঁজে পাওয়া যায় নি।

শুধুমাত্র প্রয়োজনীয় ভিউপোর্টের জন্য অতিরিক্ত ক্লিয়ারফিক্স যোগ করুন

<div class="clearfix visible-xs-block"></div>

উদাহরণ স্বরূপ:

<div class="col-md-3 col-xs-6">This is a long text</div>
<div class="col-md-3 col-xs-6">This is short</div>
<div class="clearfix visible-xs-block">This is a long text</div>
<div class="col-md-3 col-xs-6">Short</div>
<div class="col-md-3 col-xs-6">Long Text</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">Longer text which will push down</div>
<div class="col-md-3 col-xs-6">Short</div>

দয়া করে http://getbootstrap.com/css/#grid-responsive-resets পড়ুনhttp://getbootstrap.com/css/#grid-responsive-resets


আমি এই সুপার সহজ সমাধান ব্যবহার 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; ?>

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

একটি ভাল বিতর্কের জন্য https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 দেখুন , এবং একটি লিংক সহ নীচে আপনি রেসপোনে চান।

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

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

২017 সাল অনুসারে, একটি প্রতিক্রিয়াশীল নকশার সমান উচ্চতা কলাম তৈরি করার সর্বোত্তম (এবং সহজতম) উপায়টি হল 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..

যে কেউ বুটস্ট্র্যাপ 4 ব্যবহার করে এবং সমান উচ্চতা কলামগুলির জন্য অনুসন্ধান করলে কেবল row-eq-heightপ্যারেন্ট ডিভ ব্যবহার করে

  <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>

রেফারেন্স: getbootstrap.com.vn/examples/equal-height-columns


@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/

এখানে বিভিন্ন উত্তর থেকে অ্যাডাপ্টেড। IE8 এবং 9 টি মরে গেলে একবার ফ্লেক্সবক্স-ভিত্তিক উত্তরগুলি সঠিকভাবে হয় এবং Android 2.x একবার মারা গেলে একবারে এটি ২015 সালে সত্য নয় এবং ২016 সালে এটি হবে না। IE8 এবং 9 এখনও 4- আপনি কত পরিমাপ করেন তার উপর নির্ভর করে 6% ব্যবহার এবং অনেক কর্পোরেট ব্যবহারকারীর জন্য এটি আরও খারাপ। caniuse.com/#feat=flexbox

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

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

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







twitter-bootstrap