如何防止引导柱从一个部分跳到另一个部分，或者在彼此之间跳跃？

Question

我正在为我的项目准备一个证明部分。有4个div，但是它们的内容是不均匀的，所以当我开始把屏幕的宽度拉在一起时，在col-sm-6中它们应该像2-2一样排列，但是div 3号跳到div no.4的位置，留下一个空空间，然后div 4号跳到下面一行。我怎么才能防止他们搞砸呢？我试过添加max-width，但这也不管用.

​

.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

使用flexbox可以避免这个问题。你得修改一下你的标记。请检查附加的代码段。

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

​

旧答案过时- JS解决方案

你得给盒子上固定的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

引导程序的col是在左边浮动的，所以如果它们没有相同的高度，就会变成那样。

2解决办法是：

• 将高度设置为所有列
• 在小屏幕上的第三列中添加一个clearfix。

Answer 3

像这样实现您的列(我在主行中又添加了两个行，用于清除"sm“和"md”屏幕上的浮动)：

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