මම භාවිතා කරන්නේ බූට්ස්ට්‍රැප්. එකම උසකින් තීරු තුනක් සාදා ගන්නේ කෙසේද?

මෙන්න ගැටලුවේ තිර රුවක්. නිල් සහ රතු තීරු කහ තීරුවට සමාන උසකින් යුක්ත වීමට මම කැමතියි.

මෙන්න කේතය:

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

බූට්ස්ට්රැප් 4 භාවිතා කරමින් විසඳුම 4

බූට්ස්ට්‍රැප් 4 ෆ්ලෙක්ස්බොක්ස් භාවිතා කරයි, එබැවින් අමතර CSS අවශ්‍ය නොවේ.

නිරූපණය

<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 ණාත්මක ආන්තික භාවිතා කරමින් විසඳුම 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 එකතු කරන ලදි. මීට පෙර පළ කරන ලද අදහස් මෙම විසඳුමට අදාළ නොවේ.

නිරූපණය

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

යාවත්කාලීන කිරීම 2020

Bootstap 3.x සඳහා හොඳම ප්‍රවේශය - CSS flexbox භාවිතා කිරීම (සහ අවම CSS අවශ්‍ය වේ) ..

.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

වෙනත් ක්‍රියාමාර්ග

මෙම විකල්පයන් අන් අය විසින් නිර්දේශ කරනු ඇත, නමුත් ප්‍රතිචාරාත්මක නිර්මාණ සඳහා හොඳ අදහසක් නොවේ . මේවා ක්‍රියාත්මක වන්නේ සරල තනි පේළි පිරිසැලසුම් සඳහා පමණි.

1) විශාල negative ණ ආන්තිකයන් සහ පෑඩින් භාවිතා කිරීම

2) සංදර්ශකය භාවිතා කිරීම : වගු කොටුව (මෙම විසඳුම ප්‍රතිචාරාත්මක ජාලයට ද බලපායි, එබැවින් tableතීරු සිරස් අතට සිරස් වීමට පෙර පුළුල් තිරවල පමණක් දර්ශනය යෙදීම සඳහා @ මාධ්‍ය විමසුමක් භාවිතා කළ හැකිය )

බූට්ස්ට්‍රැප් 4

ෆ්ලෙක්ස්බොක්ස් දැන් පෙරනිමියෙන් බූට්ස්ට්‍රැප් 4 හි භාවිතා කරයි, එබැවින් සමාන උස තීරු සෑදීමට අමතර CSS අවශ්‍ය නොවේ: 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>

ජාවාස්ක්‍රිප්ට් අවශ්‍ය නොවේ. මේ .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" />

ඔබේ html වෙත

ඔබේ ප්‍රශ්නයට පිළිතුරු සැපයීම සඳහා ඔබට අවශ්‍ය වන්නේ පෙර සැකසූ 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]-->

පිළිගත් පිළිතුරේ ඇති අනෙක් උදාහරණ දෙක සම්බන්ධයෙන් ගත් කල ... මේස නිරූපණය යහපත් අදහසක් නමුත් එය වැරදි ලෙස ක්‍රියාත්මක වේ. බූට්ස්ට්‍රැප් තීරු පංති සඳහා CSS යෙදීමෙන් ජාලක රාමුව මුළුමනින්ම බිඳ වැටෙනු ඇත. ඔබ එකක් සඳහා අභිරුචි තේරීම් කාරකයක් භාවිතා කළ යුතු අතර [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%;
    }
}

අවසාන වශයෙන්, එක් සත්‍ය පිරිසැලසුමක අනුවාදයක් ක්‍රියාත්මක කරන පිළිගත් පිළිතුරේ පළමු නිරූපණය සමහර තත්වයන් සඳහා හොඳ තේරීමක් වන නමුත් බූට්ස්ට්‍රැප් තීරු සඳහා සුදුසු නොවේ. එයට හේතුව සියලු තීරු බහාලුම් උස දක්වා පුළුල් වීමයි. එබැවින් තීරු ඒවාට යාබද මූලද්‍රව්‍යවලට නොව සමස්ත බහාලුමටම ව්‍යාප්ත නොවන බැවින් මෙයද ප්‍රතිචාරාත්මක බව බිඳ දමනු ඇත. මෙම ක්‍රමය මඟින් ඔබට තවදුරටත් පේළි සඳහා පහළ ආන්තිකයන් යෙදීමට ඉඩ නොදෙන අතර නැංගුරම් ටැග් වෙත අනුචලනය කිරීම වැනි වෙනත් ගැටළු ද ඇති කරයි.

සම්පූර්ණ කේතය සඳහා නම්යශීලී කොටුව කේතය ස්වයංක්‍රීයව උපසර්ග කරන කෝඩපන් බලන්න.

ඔබ එක් පේළියක් පමණක් පෙන්වන බැවින් ඔබේ භාවිත නඩුව එයට පමණක් සීමා විය හැකිය. ඔබට පේළි කිහිපයක් තිබේ නම්, මෙම ප්ලගිනය - ගිතුබ් ජාවාස්ක්‍රිප්ට්-ග්‍රිඩ් - පරිපූර්ණව ක්‍රියා කරයි! එමඟින් සෑම පුවරුවක්ම උසම පැනලය දක්වා විහිදෙන අතර එම පේළියේ උසම පැනලය මත පදනම්ව එක් එක් පේළියට වෙනස් උසකින් යුක්ත වේ. එය css එදිරිව jquery විසඳුමක් වන නමුත් එය විකල්ප ප්‍රවේශයක් ලෙස නිර්දේශ කිරීමට අවශ්‍ය විය.

ඔබට ඕනෑම බ්‍රව්සරයක මෙම කාර්යය කිරීමට අවශ්‍ය නම්, javascript භාවිතා කරන්න:

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

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

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

මම මෙම ත්‍රෙඩ් එකේ සහ වෙනත් පිටුවල ඉදිරිපත් කර ඇති යෝජනා වෙනස් කිරීමට උත්සාහ කළ නමුත් සෑම බ්‍රව්සරයකම 100% විසඳුමක් ක්‍රියාත්මක නොවීය.

ඒ නිසා මම සෑහෙන කාලයක් අත්හදා බැලුවා. 1 පන්තියක් පමණක් ඇති නම්‍ය පෙට්ටියේ ආධාරයෙන් බූට්ස්ට්‍රැප් සමාන උස තීරු සඳහා සම්පූර්ණ විසඳුමක් . මෙය සියලුම ප්‍රධාන බ්‍රව්සර් IE10 + හි ක්‍රියා කරයි.

CSS:

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

HTML:

<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-height භාවිතා කර සියලුම ළමා තීරු ඉලක්ක කළ .equal-colsහැකිය. මෙවැනි:

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

මෙම පොලිෆිල් නොමැතිව තීරු සුපුරුදු පරිදි බූට්ස්ට්‍රැප් තීරු ලෙස ක්‍රියා කරනු ඇති අතර එමඟින් එය හොඳ පසුබෑමකි.

ඔබට පේළිගත කිරීමේ නම්‍යතාවය භාවිතා කළ හැකි අතර එය ඉතා හොඳින් ක්‍රියා කරන අතර CSS සමඟ සෑම පේළි අංගයක්ම වෙනස් කිරීමට වඩා ටිකක් පිරිසිදු විය හැකිය.

මගේ ව්යාපෘතිය සඳහා මට අවශ්ය වූයේ ළමා මූලද්රව්යවල සෑම පේළියක්ම මායිම් එකම උසකින් යුක්ත වන නිසා දේශසීමා හකුරු ලෙස පෙනෙනු ඇත. මේ සඳහා මම සරල css පන්තියක් නිර්මාණය කළෙමි.

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

.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

කවුරුහරි කැමති නම් කම්මුල් jquery විසඳුම. ඔබගේ සියලු තීරු (එල්) වලට පොදු පන්ති නාමයක් ඇති බවට වග බලා ගන්න ... ඔබ එය window (කවුළුව) හා බැඳ තැබුවහොත් ප්‍රතිචාරාත්මකව ක්‍රියා කරයි.

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()ශ්‍රිතයේ අවසාන උසම ලෙස පමණක් සකසා ඇති බව h ක්‍රිස්ගේ ප්‍රකාශයට අනුව මෙම ලිපිය සංස්කරණය කර ඇත

පෙර පිළිතුරු වලින් සමහරක් බෙදීම් එකම උසකින් කරන්නේ කෙසේද යන්න පැහැදිලි කරයි, නමුත් ගැටළුව වන්නේ පළල ඉතා පටු වූ විට බෙදීම් ගොඩගැසී නොතිබීමයි, එබැවින් ඔබට ඔවුන්ගේ පිළිතුරු එක් අමතර කොටසකින් ක්‍රියාත්මක කළ හැකිය. සෑම කෙනෙකුම සඳහා ඔබ භාවිතා කරන පේළි පන්තියට අමතරව මෙහි දී ඇති CSS නාමය භාවිතා කළ හැකිය, එබැවින් ඔබට සෑම විටම බෙදීම් එකිනෙකට යාබදව තිබිය යුතු නම් div එක මේ ආකාරයට විය යුතුය:

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

2018 අග භාගයේදී මට මෙහි වටිනා විසඳුමක් සොයා ගැනීමට නොහැකි වීම ගැන මම පුදුම වෙමි. මම ඉදිරියට ගොස් එය නම්‍යශීලි කොටුව භාවිතයෙන් බූට්ස්ට්‍රැප් 3 විසඳුමක් සොයා ගතිමි.

පිරිසිදු හා සරල උදාහරණය:

HTML

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

CSS

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/

කවුරුහරි බූට්ස්ට්‍රැප් 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>

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

මම දන්නවා මම ගොඩක් පරක්කුයි නමුත් දැන් ඔබට "මිනි-උස" විලාසිතාවේ ගුණාංගය භාවිතා කර ඔබේ අරමුණ සාක්ෂාත් කරගත හැකිය.

මෙන්න මගේ විසඳුම (සම්පාදනය කරන ලද CSS):

.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තීරු සමඟ XS තිර මත ගොඩගැසෙනු ඇත. ඔබට ඒවා භාවිතා කිරීමට අවශ්‍ය ඕනෑම තිරයක ඒවා ගොඩගැසීමට අවශ්‍ය නොවේ නම් .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ඇතුළත නිසි ලෙස ක්‍රියා නොකරනු ඇත.

පේළි වල පමණක් තීරුවක යෙදීමේදී විසඳුම 1 භාවිතා කිරීමේ ගැටලුවක් තිබේ. විසඳුම 1 වැඩි දියුණු කිරීමට කැමතියි.

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

(කණගාටුයි, පොප්නූඩ්ල්ස් ඇන්වර් ගැන අදහස් දැක්විය නොහැක. මට ප්‍රමාණවත් පිළිගැනීමක් නොමැත)

හොඳම දේ:

ගිතබ් පරාවර්තනය - ලියකියවිලි

බූට්ස්ට්‍රැප් සමඟ ක්‍රියා කරයි

යාවත්කාලීන කිරීම:

1. CSS ඇතුළත් කරන්න
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: ldjordan@gmail.com
 * 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>

මෙන්න මගේ ක්‍රමය, මාධ්ය විමසුමේ යම් වෙනස්කම් සමඟ නම්‍යතාවය භාවිතා කර ඇත.

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

ප්‍රවාහය සාමාන්‍යයෙන් බූට්ස්ට්‍රැප් සම්මත ප්‍රතිචාරාත්මක ස්වභාවයට බාධා කරන නිසා මම ප්‍රතිචාරාත්මක කඩඉම් ලකුණු භාවිතා කරමි.

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 පිළිබඳ තවත් එක් උදාහරණයක්:

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

ඉක්මන්, පහසු විසඳුමක් සොයන අය සඳහා - ඔබට සාපේක්ෂව බ්ලොක් අන්තර්ගත සමූහයක් තිබේ නම්, විශාලතම බ්ලොක් එකට වඩා මදක් විශාල වන ඩිව් එකේ අවම උසකින් යුක්ත වේ නම් එය ක්‍රියාත්මක කිරීම පහසු වේ.

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

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

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

.container-height යනු ශෛලියේ පන්තියකි .row හැඩැති මූලද්‍රව්‍යයකට එහි සියලුම .col * ළමයින්ට එකම උසකින් යුක්ත වේ.

මෙම මෝස්තර සමහර නිශ්චිත .row (.container-height, උදාහරණයේ දී මෙන්) සඳහා පමණක් යෙදීමෙන් ආන්තිකය සහ පෑඩින් පිටාර ගැලීම සියලු දෙනාටම වළක්වයි .col *.

මම එකම ගැටළුවට විසඳුමක් සෙව්වෙමි. - අමතර කේතයක් නැතිව ..

හොඳ විසංවාදයක් සඳහා https://medium.com/wdstack/bootstrap-equal-height-columns-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..

@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 මිය ගිය පසු නම්‍යශීලි කොටුව මත පදනම් වූ පිළිතුරු නිවැරදි ක්‍රමය වන අතර ඇන්ඩ්‍රොයිඩ් 2.x මිය ගිය පසු එය 2015 දී සත්‍ය නොවන අතර එය 2016 දී සිදු නොවනු ඇත. IE8 සහ 9 තවමත් 4- ඔබ මනින ආකාරය අනුව භාවිතයෙන් 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 CSS භාවිතා කරන බව සලකන්න, එසේ නැතිනම් අඩුවෙන් ලබා දෙන දේවල් සම්බන්ධිත උදාහරණයේ දෘඩ කේත කර ඇත. උදාහරණයක් ලෙස @ screen-sm-min වෙනුවට ඇතුළත් කළ යුතු දේ වෙනුවට ආදේශ කර ඇත - 768px.

ඔබේ සන්දර්භය තුළ එය අර්ථවත් නම්, ඔබට එක් එක් විවේකයෙන් පසු හිස් තීරු 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 -->

මෙය උපකාරී වේ යැයි සිතමු!

ආචාර්ය ෆ්ලින්ක් විසින් දෙන ලද පිළිතුර බූට්ස්ට්‍රැප් 3 form-horizontalබ්ලොක් එකකට ද යෙදිය හැකි යැයි මම සිතමි . සෑම සෛලයකටම පසුබිම් වර්ණ භාවිතා කිරීමට අවශ්‍ය නම් එය ඉතා ප්‍රයෝජනවත් වේ. මෙය බූට්ස්ට්‍රැප් පෝරම සඳහා වැඩ කිරීම සඳහා, ඔබට වගු වැනි ව්‍යුහයක් අනුකරණය කිරීමට සේවය කරන පෝරමයේ අන්තර්ගතය එතීමට අවශ්‍ය වේ.

පහත දැක්වෙන උදාහරණය මඟින් CSS මඟින් අතිරේක මාධ්‍ය විමසුමක් පෙන්වන අතර එය බූට්ස්ට්‍රැප් 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;
  }
}

නම්‍යශීලි කොටුව හරහා මෙය කිරීමට උත්සාහ කරන්න

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

ඉතින් ඔව්, බූට්ස්ට්‍රැප් 4 මඟින් සියලු තීරු එක සමාන උසකින් යුක්ත වේ, කෙසේ වෙතත් ඔබ පේළිය තුළ අන්තර්ගතය වටා මායිමක් නිර්මාණය කරන්නේ නම්, තීරු සමාන උස නොවන බව පෙනේ!

මම height: 100%තීරුව තුළ ඇති මූලද්‍රව්‍යයට යොදන විට මගේ ආන්තිකය නැති වූ බව මට පෙනී ගියේය.

මගේ විසඳුම වන්නේ කොල්ගේ ඩිව් එක මත පෑඩින් භාවිතා කිරීමයි (අභ්‍යන්තර මූලද්‍රව්‍යයේ ආන්තිකයක් වෙනුවට). එසේ වැනි:

<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 භාවිතා කර මායිමක් සහිත පෙට්ටි නවයක කට්ටලයක් නිර්මාණය කරයි

HTML

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

CSS

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

ජේ

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

03/19/2019

** බූට්ස්ට්‍රැප් 4 සමාන උස විසඳුම **

සමාන උස සඳහා බූට්ස්ට්‍රැප් උපයෝගිතා / නම්‍යතාවය

කෝඩපෙන් හි සජීවී උදාහරණය

බූට්ස්ට්‍රැප් පන්තියෙන් සමාන උස මව් කොට් div ස්ථාවර 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>