ブートストラップ列が片方の部分から他の部分に飛び散るのを防ぐにはどうすればいいですか？

Question

私は自分のプロジェクトの証言パートに取り組んでいます。 4つのdivがありますが、内容が不揃いなので、画面の幅を合わせると、col-sm-6には2-2のように並んでいるはずですが、div 3がdiv4、空のスペースを残して、その後div4は1行下にジャンプします。どのように私はそれらを台無しにすることを防ぐことができますか？

.testimonial-content { 
 
    text-align: center; 
 
    margin: 15px auto 15px auto; 
 
} 
 
.testimonial-content h5 { 
 
    margin-top: 20px; 
 
} 
 
.testim-logo-container { 
 
    height: 100px; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.testimonial-logo { 
 
    max-width: 100px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="row"> 
 
    <div class="testimonial-content"> 
 
    <div class="col-lg-3 col-sm-6 col-xs-12"> 
 
     <div class="testim-logo-container"> 
 
     <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/999/000/?text=1" alt="testimonial logo"> 
 
     </div> 
 
     <p>"It's amazing to see the progress of the students, that Laszlo and Balazs has been going through during the Multimedia Design education at the IBA."</p> 
 
     <h5>Tina Østergaard Filsø</h5> 
 
     <h5>Visual Communication - IBA</h5> 
 
    </div> 
 
    </div> 
 
    <div class="testimonial-content"> 
 
    <div class="col-lg-3 col-sm-6 col-xs-12"> 
 
     <div class="testim-logo-container"> 
 
     <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/6c9/000/?text=2" alt="testimonial logo"> 
 
     </div> 
 
     <p>"Laszlo showed dedication and self discipline during his period with Our Daily Heroes."</p> 
 
     <h5>Gyula Vajda</h5> 
 
     <h5>CEO - Our Daily Heroes</h5> 
 
    </div> 
 
    </div> 
 
    <div class="testimonial-content"> 
 
    <div class="col-lg-3 col-sm-6 col-xs-12"> 
 
     <div class="testim-logo-container"> 
 
     <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/c96/000/?text=3" alt="testimonial logo"> 
 
     </div> 
 
     <p>"It was great to work with Balazs, easy going, enthusiastic, works fast and on a reasonable price."</p> 
 
     <h5>Dániel Szilágyi</h5> 
 
     <h5>Founder - BudapestDenTrip</h5> 
 
    </div> 
 
    </div> 
 
    <div class="testimonial-content"> 
 
    <div class="col-lg-3 col-sm-6 col-xs-12"> 
 
     <div class="testim-logo-container"> 
 
     <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/96c/000/?text=4" alt="testimonial logo"> 
 
     </div> 
 
     <p>"Laszlo was a top-A intern, he took the assignments very seriously and executed them well.<br />He is enthusiastic to learn and experience new things."</p> 
 
     <h5>Björgvin Pétur</h5> 
 
     <h5>Senior Designer - //JÖKULÁ</h5> 
 
    </div> 
 
    </div><!-- Testimonials end--> 
 
</div><!-- Testimonials row ends-->

Answer 1

あなたはボックスの固定heightを与えなきゃ。高さはtextと異なる場合がありますので、位置合わせの問題が発生します。例えばのための

：

.col-lg-6{ 
height: 500px; 
} 

この問題を解決するための一般的で簡単な方法は、JavaScriptを使用して使用同じ高さです。

https://css-tricks.com/equal-height-blocks-in-rows/

equalheight = function(container) { 

    var currentTallest = 0, 
     currentRowStart = 0, 
     rowDivs = new Array(), 
     $el, 
     topPosition = 0; 
    $(container).each(function() { 

     $el = $(this); 
     $($el).height('auto') 
     topPostion = $el.position().top; 

     if (currentRowStart != topPostion) { 
      for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
       rowDivs[currentDiv].height(currentTallest); 
      } 
      rowDivs.length = 0; // empty the array 
      currentRowStart = topPostion; 
      currentTallest = $el.height(); 
      rowDivs.push($el); 
     } else { 
      rowDivs.push($el); 
      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 
     } 
     for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
      rowDivs[currentDiv].height(currentTallest); 
     } 
    }); 
} 
$(window).resize(function() { //to work in resize 
    equalheight('.col-lg-6'); 
}); 

$(document).ready(function() { 
equalheight('.col-lg-6'); 
}); 

Answer 2

...私はmax-widthを追加しようとしたが、それはどちらか動作しませんでしたブートストラップの彼らは同じ高さを持っていないので、もしcolは、左側に浮いています、あなたはそのようになります。

2溶液は次のようになります

• が小さな画面上clearfix第3列を追加するすべての列
• に高さを設定します。

Answer 3

（私は「SM」と「MD」の画面上でフロートをクリアし、メイン行内部の2つの以上の行を追加しました）このようなあなたの列を実装します。

<div class="row"> 
    <div class="col-lg-6"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <!-- col 1 content --> 
      </div> 
      <div class="col-sm-6"> 
       <!-- col 2 content --> 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-6"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <!-- col 3 content --> 
      </div> 
      <div class="col-sm-6"> 
       <!-- col 4 content --> 
      </div> 
     </div> 
    </div> 
</div>