本文介绍了如何防止Bootstrap列从一个零件跳到另一零件或在另一个零件下跳？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的项目做推荐部分。有4个div，但是它们的内容并不均匀，因此当我开始将屏幕的宽度拉到一起时，在 col-sm-6 中，它们应该对齐类似于2-2，但3号分区跳到4号分区的位置，后面留有空白，然后4号分区跳到下面一行。如何防止他们搞砸？我尝试添加最大宽度，但是那也不起作用...
I'm working on a testimonial part for my project. There are 4 divs, but their content is uneven, therefore when I start to pull the width of the screen together, in col-sm-6they're supposed to line up like 2-2, but the div no.3 jumps over to the place of div no.4, leaving an empty space behind, then the div no.4 jumps a row below. How can I prevent them of messing up? I've tried adding max-width, but that didn't work either...
.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-->推荐答案
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.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 flex-row">
<div class="testimonial-content col-lg-3 col-sm-6 col-xs-6">
<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 class="testimonial-content col-lg-3 col-sm-6 col-xs-6">
<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 class="testimonial-content col-lg-3 col-sm-6 col-xs-6">
<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 class="testimonial-content col-lg-3 col-sm-6 col-xs-6">
<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><!-- Testimonials end-->
</div><!-- Testimonials row ends-->您必须为包装盒提供固定的高度。由于其高度可能随文本的不同而不同，因此会出现对齐问题。
You gotta give fixed height for the boxes. Since its height may vary with text, alignment issue will occur.
例如：
.col-lg-6{
height: 500px;
}
解决此问题的一种常见且快速的方法是使用 JavaScript 。
A common and quick way to solve this problem is use equal-height using JavaScript.
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');
});
这篇关于如何防止Bootstrap列从一个零件跳到另一零件或在另一个零件下跳？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！