Question

我正在为我的项目制作推荐书。有4个div，但是它们的内容是不均匀的，因此当我开始将屏幕的宽度拉到一起时，在col-sm-6它们应该排成2-2，但是div 3跳过到了4号的地方，留下一个空的空间，然后第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

你必须为这些方框提供固定的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

像这样实现你的列（我在主行中添加了两行，清除＆＃34; sm＆＃34;和＃34; md＆＃34;屏幕）上的浮动：

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

如何防止Bootstrap列从一个部分跳到另一个部分或彼此之下？

3 个答案: